Switch
Switch
A Radix Switch.Root — an on/off toggle, styled like iOS's.
import { Switch } from "@pompeitech/vesuvius-ui";With a label
Checked / disabled
In a settings row
The most common real-world placement — label and description on the left, switch pinned right:
Email notifications
Get notified about account activity.
API
Switch
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | Controlled state. | |
defaultChecked | boolean | false | Initial state, uncontrolled. |
onCheckedChange | (checked: boolean) => void | ||
disabled | boolean | false | |
required | boolean | false | Marks the field required for native form validation. |
name / value | string | For plain (non-JS) form submission — renders a hidden native checkbox input alongside the styled button. |
Plus every other native <button> prop (Radix's Switch.Root renders a <button role="switch">).
Accessibility
Tab to focus, Space to toggle — same as Checkbox, the rendered element is a <button>, so it needs a <Label htmlFor> or aria-label of its own rather than relying on an implicit native association.