Switch Primitive
Headless, unstyled switch primitive with full accessibility support.
Basic Headless Primitive
The primitive provides behavior and accessibility without styling. Add minimal structural styling.
State: Off
Controlled State
Control the primitive state externally with buttons.
Disabled State
Switches can be disabled to prevent interaction.
Accessibility Features
Built-in accessibility features following WAI-ARIA design patterns.
Keyboard Shortcuts
Navigate and interact with switches using keyboard.
API Reference
Component properties and parameters.
Switch
Checked
Type: bool
Default: false
Controls whether the switch is on (checked). Supports two-way binding.
CheckedChanged
Type: EventCallback<bool>
Callback invoked when the checked state changes.
Disabled
Type: bool
Default: false
Prevents toggling when true.
Additional Attributes
Any additional attributes (class, style, Id, aria-label, etc.) are passed to the button element.
Auto-applied attributes: role="switch", aria-checked, aria-disabled, disabled, tabindex, data-state
When to Use Primitives
Choose between primitives and styled components based on your needs.
Use Switch Primitive
- ✓ Building a custom design system
- ✓ Need complete control over styling
- ✓ Want to apply your own CSS framework
- ✓ Creating unique visual designs
Use Styled Component
- ● Want shadcn/ui design out of the box
- ● Need quick implementation
- ● Like the default styling
- ● Prefer convention over configuration