components
Toggle
v.1.0.0 | Saturn
StorybookSwitch the state of a single item on/off.
Component
Play with the component with our playground.
Anatomy
| Name | Description |
|---|---|
1 Required | width height |
2 Required | height width |
3 Required | Indicates the on state. Icon height |
| Name | Description |
|---|---|
1 Required | Background color may vary according to design needs. width height |
2 Required | height width |
3 Required | Indicates the yes or no state. |
States and Variants
- On: Displays the toggle in the on state.
- Off: Displays the toggle in the off state.
- Unset: Displays the default toggle not activated or activated by the user.
- Keyboard focus: A keyboard focus state communicates when a user has highlighted an element, using an input method such as a keyboard or voice.
Simple
On-off
Keyboard interaction
- Activate and deactivate by keyboard
For users who only use the keyboard and screen readers, it should be possible to enable and disable the toggle.
Toggles the thumb between on and off states with Space / Enter keys.
Behaviours
On/Off stateClicking or tapping on the toggle activates or deactivates it.
Vertical groupingThey will be aligned vertically respecting a spacing of 16px.
Label alignmentThe toggles will always go with a label, but the location of this can vary and will depend on the block, molecule or row where it is located, therefore it will not be defined in this basic component. If we define that when placing a label the minimum distance to respect is 16px.
Right alignmentWhen displaying a list of options with a toggle, each line will fit the full width of the screen and the toggle should always be aligned to the right.
Do's and dont's
Do’s
Keep labels short and direct. A label should describe what the control does when the switch is on.
Don’t
Do not add long and unintuitive texts that can be confusing for the user.
Do’s
The labels will always go to the left of the toggles.
Don’t