A switch toggles a single setting on or off. It takes effect immediately, so use it for options that don’t require a separate save step.
Figma
The Figma reference for Switch will appear here once the design link is added.
Storybook
Interactive examples for Switch will render here once the Storybook link is wired in.
Best practices
- Use a switch for an immediate on/off setting; use a checkbox when the choice is confirmed later by a submit action.
- Always provide a clear label describing what the switch controls.
- Frame the label positively so “on” is the affirmative state.
- Avoid needing help text to explain what on and off mean.
Do’s and don’ts
Do
Use a switch for a setting that applies the moment it changes.
Don’t
Use a switch inside a form that only takes effect after the person presses “Save”.
Accessibility
- The switch exposes its checked state to assistive technology and is toggled with Space or Enter when focused.
- Associate a visible label with the control so its purpose is announced.