Switch
Switch Primitive
Headless, unstyled switch primitive with full accessibility support.
Basic Headless Primitive
The primitive provides behavior and accessibility without styling.
State: Off
Tip
The rendered element remains fully headless; only utility classes are applied for visual structure.
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 patterns.
Included by default
role="switch", aria-checked, keyboard toggling (Space/Enter), focus behavior, and disabled-state semantics.
Keyboard Shortcuts
Navigate and interact with switches using keyboard.
Toggle switch
Space
Toggle switch
Enter
Navigate to switch
Tab
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
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Checked | bool | false | Controls whether the switch is on. Supports two-way binding with @bind-Checked. |
| CheckedChanged | EventCallback<bool> | — | Callback invoked when the checked state changes. |
| Disabled | bool | false | Prevents toggling when true. |
| Id | string? | — | Identifier used for label association. |
| ChildContent | RenderFragment? | — | Optional custom thumb/content rendered inside the switch button. |