How they help
The distinct visual representation of on and off states in switches helps prevent user errors by making it easy to see the current status of a setting. Additionally, the immediate feedback from toggling a switch acts as a confirmation of the action, reducing the likelihood of unintended changes.
Example of a switch
Anatomy
- Focus ring: visual focus state
- Track: stationary part of the switch
- Thumb: moveable part of the switch
- Label❖: clear text telling the user what they’re making active
Visual reference for anatomy
Variants
There are 2 variants of the component: with and without a label.
- With label: Use switches with labels in most cases due to the clarity they provide to the user
- Without label: If you choose not to label a switch, ensure it's placed in an obvious context. For instance, in a data grid, the switch could be represented by the column header. This clarity helps users understand the switch's purpose without explicit labeling.
Visual of switch variants
Designer resources