Anatomy
- Label: Text that describes what setting or action the toggle controls.
- Subtext: (Optional) Helper text providing extra context about the label.
- Track: A pill-shaped container that changes its background color to reflect the current on/off state of the toggle switch
- Knob: Small white thumb that slides along the track to indicate the on/off state of the toggle
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.
General Component Behaviors
- Each toggle is independent of all other toggles 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.
States
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