Toggle control in selected and unselected states. !(/content/images/-SKn4rlQm8lBzpAMDmvk5MQ.png)
Image credit: Material DesignĪ toggle should look like a on/off switch. !(/content/images/-J7sQ1GTvPap9LF1jXhBr8g.png)Ĭheckbox control in selected and unselected states. #Best Practices for Checkboxes and TogglesĪ checkbox should be a small square that has a checkmark or an X when selected. Toggles are commonly used as the light switches The toggle switch general use is to represent an action (e.g. Switches support two simple, diametrically opposed choices !(/content/images/-xpCJOjHKTDcDAHfO0yojYA.png) The toggle switch represents a physical switch that allows users to turn things on or off. In other words, each checkbox is independent of all other checkboxes in the list, and checking one box doesn’t uncheck the others. CheckboxesĬheckboxes are used when there is a list of options and the user may select any number of choices, including zero, one, or several. In this article we’ll focus on checkboxes and toggles. Each of them can be great when used correctly. Option selection can be represented by checkboxes, toggles, radio buttons and drop-downs controls. Nonetheless there are some considerations to keep in mind when you choose the element you would like to use as selection control. Of course, we all have rules of thumb that we follow. When creating forms, interaction designers are often faced with having to select an UI element that dictates the interaction of option selection.