Use switch when the effect applies instantly after toggling.
Switch
Immediate on/off control for a single setting.
- .source-switch-root Label wrapper and click target
- .source-switch-track Track background with state styling
- .source-switch-thumb Sliding thumb indicator
- .source-switch-input Native checkbox input
- .source-switch-content Label and hint copy
States
StateAppearance
OffNeutral track background and left thumb position.
OnSemantic palette track and translated thumb.
FocusFocus-visible outline around control.
DisabledMuted and not-allowed cursor.
Design intent
Switch toggles a setting immediately. The state changes the moment the user flips it, no save needed. This is the key distinction from Checkbox: Switch is for real-time effects, Checkbox's value is submitted as part of a form later. If a confirmation dialog is needed after the toggle, the interaction belongs on a button.
When to use
Do
Write labels that stay clear in both states.
Keep visual state synchronized with real state, including async updates.
Don't
Do not use switch when value is only applied after Submit. Use Checkbox.
Avoid disruptive confirmations for routine settings.
Avoid labels that do not indicate what is being enabled or disabled.
Size and palette
Use sm in dense settings lists and md as default. Keep palette semantic and aligned with the type of toggle.
Designer checklist
- On and off states are visually distinguishable without relying on color alone.
- Label describes the feature or setting, not just the word 'on' or 'off'.
- Hint text explains the immediate effect when the consequence is not obvious.
- Toggle effect is immediate. If a save step is required, use a Checkbox instead.
Switch props
PropTypeDefaultDescription
checked / defaultCheckedbooleanfalseControlled or uncontrolled switch state.
sizesm | mdmdTrack and thumb dimensions.
paletteneutral | accent | success | warning | danger | infoaccentOn-state color palette.
label / hintReactNode / stringnullAdjacent text content.
Basic usage
import { Switch } from '@pierredelattre/source-react';
<Switch
name="autosave"
label="Auto-save"
checked={autoSave}
onChange={(e) => setAutoSave(e.target.checked)}
/>Small warning switch
<Switch
size="sm"
palette="warning"
label="Enable beta mode"
hint="Some features may change without notice"
/>Component tokens
TokenDefault
--source-switch-track-width2.25rem
--source-switch-track-bg-on--source-color-accent
--source-switch-thumb-size1rem
ARIA attributes
AttributePurpose
type="checkbox"Native semantics for boolean control.
label associationText gives explicit accessible name.
Keyboard support
KeyBehavior
TabMoves focus to switch.
SpaceToggles on/off state.