Switch | ELFBAR Design System

SWITCH

When to Use

Example: account preferences

Toggling a setting or feature that takes effect immediately (e.g. dark mode, notifications)
Binary on/off preferences in settings panels or forms
When the result of the toggle is instantly visible without a submit action
Use Checkbox instead when the change requires explicit form submission

Use for enabling/disabling a setting that takes immediate effect (e.g. "Allow notifications", "Remember me")

Don’t

Don't use Switch for batch selection — use Checkbox instead

Use for toggling a single boolean property without needing to combine multiple inputs before submitting

Don’t

Don't use Switch for unpredictable or destructive actions — use Button + Dialog confirmation instead

Keep Switch and Checkbox usage patterns distinct within the same form

Don’t

Don't mix Checkbox and Switch in the same list — it increases cognitive load

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.