Switch

Anatomy

1. Track — 52×28 px, radius --ds-radius-full, carries the state background and border.
2. Thumb — 20×20 px circle, slides left/right within the track based on state.
3. Prop Background — Optional, reinforces meaning for Information / Brand / Success semantic states.

Usage Guidelines

When to use Switch:

• Enabling/disabling a setting that takes immediate effect (e.g. "Allow notifications", "Remember me").
• Toggling a single boolean property without needing to combine multiple inputs before submitting.

Don't use Switch when:

• Don't use Switch for batch selection — use Checkbox instead.
• Don't use Switch for unpredictable or destructive actions — use Button + Dialog confirmation instead.
• Don't mix Checkbox and Switch in the same list — it increases cognitive load.

Accessibility

• Uses Radix UI @radix-ui/react-switch, native role="switch" + aria-checked to express the current state.
• The switch should always have a clear label describing "what this setting does", not just "on / off".
• Use disabled for the disabled state and ensure sufficient contrast difference from the enabled state.