Components
Toggles & Checkboxes
#Toggle
Toggles provide us with a simple way of showcasing simple choices, like Yes and No. Easy to make sense of visually pleasing too!
Let's find out how to interpret a toggle!
#Forms
- When the answer is positive (i.e., Yes), you'll see a bright teal checkmark.
- If it's a negative (i.e., No), you'll see a dark X mark.
-
There are times when you will see a toggle that can have no answer.
Pretty simple, right?
Null states
In those moments when a toggle is nullable, you got to make sure that you only make it crossed when the answer is clearly 'No'. Remember, NO is different from NO ANSWER!
#States
Focused
Disabled
Error
#Checkbox
Checkboxes on the other hand have only two states, checked and unchecked. This is mostly for simpler choices.
#Forms
-
Checked
-
Unchecked
#States
Focused
Disabled
#Keyboard Interaction
| Command | Description |
|---|---|
| Tab | Moves focus to the next field. |
| Shift Tab | Moves focus to the previous field. |
| Space when in focus |
Toggle between away from checked, crossed, no answer (if allowed).
|