Anatomy
- Control: Input element that displays the current state (on/off) and allows changing it.
- Label: Text that describes what setting or action the toggle controls.
- Hint: (Optional) Helper text providing extra context about the label.
Usage Guidelines
When to use this component
- Toggle a setting between two states (on/off) when the change takes effect immediately.
When not to use this component
- For selection in forms. Use Checkbox or Radio Button instead.
- For triggering actions that are not a true on/off state.
Best Practices
Use the toggle to immediately activate or deactivate a setting.
Don't use the toggle to select options that require explicit save action. Use the checkbox instead.
Use hint to provide additional information about the toggle.
Don't hide additional information behind icons or tooltips.
General Component Behaviors
- Each toggle is independent of all other checkboxes in the list, so toggling one doesn't change the others.
- Toggle can only be on or off. They can’t represent indeterminate states. If you need to show a indeterminate state, use a Checkbox instead of a switch.
- Toggle can’t have an error state.
- A toggle can be checked by clicking on the selector or the item’s text.
Responsive Behavior
Toggle adapts its tap target and sizes to mobile devices.
States
Variants
Default
Default variant of the toggle. Control is displayed on the left with label and hint next to the control. Control and text is aligned to the top horizontally.
Reverse
A toggle with reverse order of elements. Control is aligned to the right, with label and hint aligned to the left. Items are centered horizontally.
Content Guidelines
- Keep labels short and use sentence case.
- Label a toggle by the setting it controls, not by its state. Don’t use phrases like “Turn on”, “Activate”, “Enable”, or “Turn off” in the label.
- If more context is needed, provide it in hint text rather than in the label itself.
For further information, see the Content Styleguide.
Known Gaps