Component
Switch
A control that allows the user to toggle between checked and not checked.
Demo
Features
- Two states: checked and unchecked
- Keyboard navigation (Space/Enter to toggle)
- Controlled and uncontrolled modes
- Support for HTML forms (hidden input)
- WCAG compliant with proper ARIA attributes
Installation
bash
dotnet add package SummitUIAnatomy
Import the components and structure them as follows:
razor
<SwitchRoot>
<SwitchThumb />
</SwitchRoot>Sub-components
SwitchRoot
The root switch component containing the button element.
SwitchThumb
The thumb that visually indicates the checked state.
API Reference
SwitchRoot
| Property | Type | Default | Description |
|---|---|---|---|
| Checked | bool? | null | Controlled checked state |
| DefaultChecked | bool | false | Default checked state for uncontrolled mode |
| CheckedChanged | EventCallback<bool> | - | Callback when checked state changes |
| Disabled | bool | false | Prevents interaction with the switch |
| Required | bool | false | Indicates switch must be checked for form submission |
| Name | string? | null | Form field name for hidden input |
| Value | string? | "on" | Value submitted with form data |
SwitchThumb
| Property | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | - | Optional content to render inside the thumb |
Examples
Basic Usage
razor
<SwitchRoot DefaultChecked="true">
<SwitchThumb />
</SwitchRoot>With Label
Associate the switch with a label for better accessibility.
razor
<label style="display: flex; gap: 0.5rem; align-items: center;">
<SwitchRoot id="airplane-mode">
<SwitchThumb />
</SwitchRoot>
Airplane mode
</label>Controlled Mode
Control the checked state externally.
razor
@code {
private bool isChecked = true;
}
<SwitchRoot @bind-Checked="isChecked">
<SwitchThumb />
</SwitchRoot>
<p>Switch is @(isChecked ? "on" : "off")</p>Form Integration
Use with EditForm for form submissions.
razor
<EditForm Model="@model" OnValidSubmit="HandleSubmit">
<DataAnnotationsValidator />
<label>
<SwitchRoot @bind-Checked="model.EnableNotifications" Name="notifications">
<SwitchThumb />
</SwitchRoot>
Enable Notifications
</label>
<button type="submit">Submit</button>
</EditForm>Styling
Data Attributes
| Attribute | Values | Description |
|---|---|---|
| data-state | "checked" | "unchecked" | Current state of the switch |
| data-disabled | Present when disabled | Indicates disabled state |
CSS Example
css
/* Switch root styles */
.switch {
width: 2.75rem;
height: 1.5rem;
background: #e0e0e0;
border-radius: 9999px;
position: relative;
border: none;
cursor: pointer;
transition: background 0.15s;
}
.switch:hover {
background: #d0d0d0;
}
.switch[data-state="checked"] {
background: #0066cc;
}
.switch[data-disabled] {
opacity: 0.5;
cursor: not-allowed;
}
/* Thumb styles */
.switch-thumb {
display: block;
width: 1.25rem;
height: 1.25rem;
background: white;
border-radius: 9999px;
transition: transform 0.15s;
transform: translateX(2px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.switch[data-state="checked"] .switch-thumb {
transform: translateX(calc(2.75rem - 1.25rem - 2px));
}Accessibility
Keyboard Navigation
| Key | Action |
|---|---|
| Space | Toggles the switch state |
| Enter | Toggles the switch state |
ARIA Attributes
- role:
switchis set on the root element - aria-checked:
Reflects the current state (
trueorfalse) - aria-disabled: Set when the switch is disabled