Skip to main content

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
Available In Progress Planned Not Available Deprecated

Help us improve Astro

Please rate your present experience with Astro: