How to create a 3-State Checkbox
Johan Lund posted in Developing in Bindows on October 28th, 2010
Our wonderful users requested us to develop a Three State Checkbox component, and we (of course) complied and added it into Bindows 4.1. The new UI component is called BiThreeStateCheckBox (3CB), and it looks like this:
The 3CB (sometimes referred to as a tri-state checkbox) is basically a checkbox with an extra state. If you count the disabled state it actually has four states.
Two examples of situations where you might need such a control:
• To indicate that the user has not yet made a choice (undetermined state)
• To indicate a partial state. E.g. In a file tree, whether some, all, or no files have been selected in one of the subtrees.
The checkbox is pretty easy to setup and use. In the AppLauncher (http://www.bindows.net/bindows/samples/applauncher/) check out the 3CB sample application, called ThreeStateCheckBoxTest.xml.
The application is simple and looks like this.
The code for this sample is pretty straightforward:
I have seen some implementations of 3CB’s that allow the user to toggle to the middle state. This is generally not a good idea. If, for example, the user can choose between three mutably exclusive colors, e.g. red, blue and green, then there are better controls for this. You have to remember that a three state checkbox does not visually present all the possible options that the user can choose from. Also keep in mind that if a user has to go from the first state to the third, he might have to pass through the second state which may or may not be natural. It might also not be immediately apparent that the checkbox has more than two states.
In most cases, checking a checkbox should not perform actions immediately. It could very well turn on a setting immediately but it shouldn’t, for example, delete a file. Users are used to being able to check/uncheck checkboxes safely then pressing a button that performs the action on the selected items.
Finally, here is a link to the API documentation for this component.