Switch
A toggle control that allows users to switch between checked and unchecked states.
Basic Usage
Simple switch with label using two-way binding.
Current state: Off
Size Variants
Switches come in three sizes: Small, Medium (default), and Large.
Settings Panel
Group of switches for application settings.
Active settings: Notifications, Analytics
Disabled State
Switches that cannot be interacted with.
Form Validation
Switch integrated with Blazor's EditForm and validation.
Interactive
Switch with custom change handler.
Dark mode disabled
Settings Cards
Switches within card containers for a polished settings interface.
Custom Styling
Switches with additional CSS classes.
Accessibility
Tab focuses switches in sequence. Space or Enter toggles the focused switch. Disabled switches are not focusable. ARIA attributes (role="switch", aria-checked, aria-disabled) are set correctly. Focus ring appears on keyboard focus and color contrast meets WCAG 2.1 AA standards.
Browser Compatibility
Tested and verified across modern browsers.
✓ Chrome 120+ (compatible)
✓ Firefox 120+ (compatible)
✓ Edge 120+ (compatible)
✓ Safari 17+ (compatible)
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Checked | bool | false | Whether the switch is on. Use @bind-Checked for two-way binding. |
| Size | SwitchSize | Medium | Size variant: Small, Medium, Large. |
| Disabled | bool | false | Whether the switch cannot be interacted with. |
| Id | string? | — | HTML id for label association. |
| Class | string? | — | Additional CSS classes for the root element. |