Usage guidelines outline how the component should and shouldn’t be used in different user interface contexts.
When to use
- To instantly turn something on or off
When not to use
- When pressing a button is required to apply the selection (mostly embedded in forms; use Checkbox instead)
- When there are multiple options and it is not a simple on/off on a single property (use a Radio Group or Checkbox instead)
Best practices
Do apply a Switch setting instantaneously. It does not require an additional button press.
Do use a label that clearly and succinctly explains the Switch’s purpose.
Do consider providing contextual guidance with a Popover.
Don’t use a Switch without a label.
Don’t add an icon to the field label.
Don’t change the icon in the Switch.
Don’t remove the icon from the Switch. The tick and cross icons exist to improve accessibility, so that we don't rely primarily on colour to communicate the Switch's state.
Don’t use helper text. It may lead to visual misalignment, especially if a Switch is placed next to other items horizontally. Use a Popover instead.
Don’t require a button press to apply a change to a Switch. For options that require a button press to apply the setting, use a Checkbox.