Overview¶
Controls are a set of UI elements that allow the user to input a certain type of content with a boolean type of setup. Controls consist of;
- Checkboxes
- Radio buttons
- Icon switch (me control)
- Toggles
Checkbox¶
A checkbox consists of a small square and, typically, text that clearly communicates a binary condition that will be set or unset when the user clicks or touches it. Checkboxes typically, but not necessarily, appear in groups, and can be selected and deselected individually.
Interactive checkbox demo¶
Info
In some cases a checkbox can be disabled by default. This is common in settings sections where a user is not allowed to make changes to a certain setting.
Radio button¶
A radio button consists of a small circle and, typically, text that clearly communicates a condition that will be set when the user clicks or touches it. Radio buttons always appear in groups of two or more and, while they can be individually selected, can only be deselected by selecting a different radio button in the same group (which deselects all other radio buttons in the group).
Interactive radio button demo¶
Info
Like other controls, radio buttons have a disabled state and can be disabled by default in certain UI setups.
Icon toggle (me control)¶
An icon-toggle consists of a user defined icon that indicates, by visual highlighting, a binary condition that will be set or unset when the user clicks or touches it. Like checkboxes, icon-toggles may appear individually or in groups, and can be selected and deselected individually.
Icon toggles are mostly common in scenarios when a user is editing text for instance chosing between bold and Italics.
Interactive icon toggle demo¶
Switch/toggle¶
A switch consists of a short horizontal "track" with a prominent circular state indicator and, typically, text that clearly communicates a binary condition that will be set or unset when the user clicks or touches it. Like checkboxes, switches may appear individually or in groups, and can be selected and deselected individually. However, switches provide a more intuitive visual representation of their state: left/gray for off, right/colored for on.