Use switches to:
- Turn a setting or feature on or off
- Enable or disable functionality immediately
- Control preferences that take effect instantly
- Activate or deactivate content or features in close proximity
Do not use switches:
- When changes require confirmation or a save action, use checkboxes with a submit button instead
- For selecting multiple items — use checkboxes instead
- When the change is not immediate, use radio buttons or checkboxes with form submission
- For choices with more than two options — use radio buttons or a select instead
Switch examples: disabled and enabled
Switch vs checkbox
Switches are best used to display an activation (e.g., on/off states). Checkboxes should be used for communicating selection (e.g., multiple table rows). There can also be more than two checkboxes in a group.
Switches, unlike checkboxes, cannot have an error state.
|
Use a switch for |
Use a checkbox for |
|---|---|
|
Immediate on/off activation |
Selection that requires form submission |
|
Single binary settings |
Multiple selections from a list |
|
Changes that take effect instantly |
Choices that need confirmation |
|
Enabling/disabling features |
Agreeing to terms, opting in |
Labels
Switch labels should be concise and follow the form guidelines.
Using a verb in the label can help users understand the switch’s action. For example, “Show calculations” or "Set as default”.
Labels should describe the enabled state, not the disabled state.
It’s usually shorter and simpler not to address users directly in labels (“Set as default”, not “Set as your default”). If addressing the user improves understanding, use the second person (you/your): “Set your income”.
Label guidelines:
- Keep labels short and action-oriented
- Use sentence case
- Position labels inline with the switch
- Include a verb when it clarifies the action
- Avoid ambiguous labels that don't clearly indicate what will happen