Switch
Toggle control for boolean settings. Fires onCheckedChange with the new boolean value.
Install
Import path
Examples
Sizes
Two sizes: sm and the default.
Disabled
Non-interactive in both the on and off positions.
Choice Card
Card-style selection where FieldLabel wraps the entire Field for a clickable card pattern.
Description
A control that allows the user to toggle between checked and not checked.
Focus is shared across devices, and turns off when you leave the app.
Invalid
Add the aria-invalid prop to the Switch component to indicate an invalid state. Add the data-invalid prop to the Field component for styling.
You must accept the terms and conditions to continue.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة التطبيق.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { Switch } from "@codefast/ui/switch";
import { Label } from "@codefast/ui/label";
<Switch id="s" />
<Label htmlFor="s">Label</Label>
API reference
Props for each part of the component. All native element props are also forwarded.
Switch
A toggle built on Radix Switch.
| Prop | Type | Default | Description |
|---|---|---|---|
| checked / onCheckedChange | boolean / (checked: boolean) => void | — | Controlled state and its change handler. |
| defaultChecked | boolean | false | Initial state when uncontrolled. |
| size | "default" | "sm" | "default" | Track and thumb size. |
| disabled | boolean | false | Blocks interaction and dims the control. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Tab | Moves focus to the switch. |
| Space | Toggles the switch. |
| Enter | Toggles the switch. |
- Has role=switch with aria-checked reflecting the current state.
- Associate a Label via htmlFor / id, or wrap the control, so it has a name.
- Use a Checkbox instead when the change should only apply after a form submit.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for settings that take effect immediately.
- Make the label describe the on state (e.g. “Email notifications”).
Don’t
- Don’t use a switch where a Checkbox (deferred submit) is expected.
- Don’t require a separate Save button for a switch that applies instantly.