Oct 26, 2016
Introducing the Three State Checkbox
Extending the functionality of a common UI element
Web interfaces borrow from real world examples to create familiar visual metaphors that are easy to interact with. Content is presented as pages, data is collected in folders and buttons are used to navigate or input information. Most UI elements directly correlate to physical precursors, but the web allows for unique extensibility.
One such UI element is the humble button. Buttons come in all shapes and sizes, but can be narrowed down to two basic types: binary or multiple choice. A light switch is an example of a binary control; it is either on or off. A volume knob is a multiple choice selector with a range of values to pick from. The type of button to use must be carefully chosen to best match the desired functionality. For example, radio buttons are used when only one option out of a few can be chosen at a time whereas dropdowns are used to consolidate lengthy lists of choices.
One of the simplest and most widely used buttons is a checkbox. Checkboxes are binary buttons, either checked or unchecked (ignoring the indeterminate state since it is just an indicator of nested boxes). Unlike a series of radio buttons, checkboxes can be toggled independently of one another, making them popular for filtering search results, like the sidebar on Amazon.
Checkboxes do have one drawback: their only two states are checked or unchecked. As a binary switch this translates to being positive or neutral. For the majority of cases these two states suffice, but what if a third option was available? Neutral, positive or negative.
Going back to the Amazon example, imagine browsing for a wristwatch. The filter sidebar offers a series of checkboxes to refine results based on various attributes like shape, display and color. These checkboxes are useful if you know what you are looking for, selecting the attributes you want included in the results. But what if you want to filter out results? For instance, if you are looking for watches that aren’t gold colored you would have to check all of the colors except for gold to display your desired results.
Filtering by inclusion is obviously not always the most efficient method. There should be an option to filter by elimination. Using a checkbox with a third, negative state would allow that.
The third state would allow for a higher level of control. Such a checkbox would be a hybrid button, the functionality of multiple choice in the guise of a binary element. Like a regular checkbox the three states would be toggled by clicking the box, cycling from blank to checked to crossed.
Here is a prototype of a three state checkbox I built on Codepen. The functionality currently relies on Javascript to switch between states. Feel free to fork the project to improve upon the code.
Three state checkboxes could easily be implemented in current HTML markup. A new type attribute could be introduced to indicate the number of states desired. Something like:
<input type="checkbox-hybrid" name="color" value="gold">to allow three states instead of the regular two.
As a hybrid of a commonly used button element, it is likely that many users would not immediately discover the existence of a third state. People are accustomed to checkboxes only being checked or unchecked, not crossed out. As such, for aspiring developers looking to extend checkbox functionality, it would be better not to make the third state absolutely necessary for conversions. However, for users who do discover the third state, I imagine it would be a happy realization.
Only specific circumstances would benefit from a checkbox with a third state, but I think having the option would delight the end user and enhance the UX of the design.
Thanks for reading.
