Switch
A switch allows users to select between one of two opposing states or options.
Code documentation
Anatomy
The switch component is made up of four elements.
- Thumb
- Track
- Helper text
- Label
![](/assets/img/components/switch/switch-anatomy.png)
Variants
Label
Labels are not required if an adjacent label is included that adequately describes the purpose of the switch and is correctly referenced to the field for accessibility purposes.
![A switch with a hidden label](/assets/img/components/switch/switch-variants-label.png)
Helper text
Helper text can be included alongside the label to provide additional context or guidance for using the control.
![A switch with helper text included](/assets/img/components/switch/switch-variants-helper-text.png)
Behavior
Text overflow
When labels wrap to multiple lines, the first line of the text remains vertically centered with the control. Helper text simply wraps to the next line.
![An example of a long label and helper text wrapping to a second line](/assets/img/components/switch/switch-behavior-text-overflow.png)
States
Switches can be either unselected or selected. Each of those statuses has five states:
- Enabled
- Focus
- Hover
- Active
- Disabled
![The unselected switch includes enabled, focus, hover, active, disabled, and pending states.](/assets/img/components/switch/switch-behavior-states-unselected.png)
![The selected switch includes enabled, focus, hover, active, disabled, and pending states.](/assets/img/components/switch/switch-behavior-states-selected.png)