Switch
Form
Toggle switch for boolean values with loading states, size variants, and accessibility-compliant interaction patterns
Basic Usage
Controlled
State: Off
With Label
Disabled
Usage Guidelines
When to Use
- Immediate settings
- Feature toggles
- Theme switching
Accessibility
- Role switch with aria-checked
- Keyboard toggle with Space
Performance
- CSS transitions
- Single state update
Common Mistakes
- Using for form selections (use Checkbox)
- Confusing on/off labels
Frequently Asked Questions
Switch is for immediate on/off actions. Checkbox is for selections that require form submission.
Yes, Switch can show a loading indicator for async operations.
Related Components
View allAutocomplete
Asynchronous search input with debounced queries, virtual scrolling for large datasets, and keyboard-driven selection
Checkbox
Accessible checkbox input with indeterminate state support and form integration
CheckboxGroup
Accessible CheckboxGroup for multi-selection, and form integration
ColorPicker
Color selection component with preset colors, HEX/RGB/HSL input, and visual picker interface