Inputsibling
Input handles text/number entry; Switch handles boolean stateSwitch
Binary on/off switch for settings and preferences. Provides immediate visual feedback and is ideal for options that take effect instantly.
Setup
import { Switch } from '@fragments-sdk/ui';Examples
Default Off
Switch in the off state
Loading preview...
Checked
Switch in the on state
Loading preview...
With Helper Text
Switch with explanatory helper text
Loading preview...
Sizes
Available size variants
Loading preview...
Disabled States
Non-interactive switches showing both states
Loading preview...
Settings Panel
Multiple switches in a realistic settings layout
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Whether the switch is in the on state |
defaultChecked | boolean | Not set | Default checked state (uncontrolled) |
onCheckedChange | function | Not set | Called when the switch is toggled: (checked: boolean) => void |
onChange | function | Not set | Alias for onCheckedChange: (checked: boolean) => void |
label | string | Not set | Visible label text |
helperText | string | Not set | Helper text shown below the label (preferred) |
description | string | Not set | Deprecated alias for helperText |
disabled | boolean | false | Whether the switch is non-interactive |
size | enumsmmdlg | md | Switch track size |
className | string | Not set | — |
name | string | Not set | — |
id | string | Not set | — |
aria-label | string | Not set | — |
aria-labelledby | string | Not set | — |
aria-describedby | string | Not set | — |
Usage Guidelines
When to use
- Binary settings that take effect immediately (e.g., dark mode, notifications)
- Enabling/disabling features in a settings panel
- Options where the result is immediately visible
- Mobile-friendly boolean inputs
When not to use
- Multiple options in a group (use checkbox group)
- Selection requires form submission to take effect (use checkbox)
- Yes/No questions in forms (use radio buttons)
- Complex multi-state options (use select or radio)
Best practices
- Switch should always have a visible label explaining what it controls
- The "on" state should be the positive/enabling action
- Changes should take effect immediately - no save button needed
- Include helperText for switches whose effect isn't obvious from the label
- Group related switches visually in settings panels
Accessibility
- Uses role="switch" with aria-checked for proper semantics
- Must have an accessible label (visible or aria-label)
- Focus indicator must be clearly visible
- State change must be announced by screen readers