A toggle control for on/off states that take effect immediately. Supports labels, descriptions, loading states, and validation. Use it for settings or preferences that apply instantly. For changes requiring a form submission, use a checkbox instead.
ts
import{XDSSwitch}from'@xds/core/Switch'
Best practices
Guidance
Practices
Do
Use for settings that apply immediately — the toggle should take effect without a separate save action.
Do
Pair with a clear, concise label that describes the setting being controlled.
Don't
Use for options that require a form submission to take effect — use a checkbox instead.
Don't
Use a switch for multi-state values — it's strictly on/off.
Examples
Common configurations, variations, and states.
Switch — Disabled
Disabled switch with label and description for gated features.
Switch — Settings Panel
Settings panel with spread-spaced switches in a card.
Switch — With Description
Toggle with a label and supporting description text.
Switch — With Status
Switches with error, warning, and success validation states.