August 23rd, 2014

How to create a 3-State Checkbox

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:

Bindows BiThreeStateCheckBox

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.

Usage

A user can check and uncheck the 3CB just like a normal checkbox. In Bindows, we call the middle state the undetermined state. You can only get to this state by setting it programmatically from JavaScript. The 3CB inherits from the standard BiCheckBox class, which in turn inherits from BiComponent. This gives you a multitude of options.

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.

Bindows 3CB Sample

The code for this sample is pretty straightforward:

3CB Code

Usability considerations

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.
(http://www.bindows.net/bindows/docs/api/BiThreeStateCheckBox.html)

3 Responses to 'How to create a 3-State Checkbox'

  1. 1Mike T.
    October 28th, 2010 at 9:38 am

    See also the indeterminate state for a checkbox: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#dom-input-indeterminate


  2. 2neo
    November 11th, 2010 at 6:34 am

    thanx for the blog i was looking for it


  3. 3Swiss Ball Exercises
    November 13th, 2010 at 4:11 pm

    Keep posting stuff like this i really like it


Leave a Response

Imhotep theme designed by Chris Lin. Proudly powered by Wordpress.
XHTML | CSS | RSS | Comments RSS