Interactive Example
Rules of Thumb
- Use a Switch for immediate state changes between two mutually exclusive options.
- For non-immediate changes, use Radio Buttons for mutually exclusive options or Checkboxes for non-exclusive options.
- For immediate actions instead of state changes, use an action Button .
- On a page, each Switch is independent of all other Switches.
- An intelligent default should be set for the initial state of a Switch.
Appearance and Behavior
A Switch consists of a circular button that slides across a track to display the “Off” (left) or “On” (right) state. Clicking anywhere on the Switch component will cause the Switch to change states immediately.
To learn more about adding Help Text to Switches, see the Forms and Validation guidance.
Asset Status
| Asset | Version | Status |
|---|---|---|
| Documentation | N/A | Available |
| UI Kit - Dark | v7 | Available |
| UI Kit - Light | v7 | Available |
| UI Kit - Wireframe | v7 | Available |
| Web Component | v7 | Available |
| Component Tokens | N/A | Planned |
Status Key
AvailableIn ProgressPlannedNot AvailableDeprecated