Switch
An on/off toggle control built on Radix UI Switch. Semantically equivalent to a checkbox but styled as a slide toggle. Use it for settings that take immediate effect without a submit step.
Built on Radix UI.
- ✓Smooth sliding thumb animation via translate
- ✓Space and Enter key toggle
- ✓Controlled and uncontrolled usage
- ✓Disabled state
- ✓Peer CSS for Label dimming
import { Switch }from "@aetherstack/ui"
switch.tsx
"use client"
import { useState } from "react"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
export function SwitchDemo() {
const [enabled, setEnabled] = useState(false)
return (
<div className="flex items-center space-x-3">
<Switch id="mode" checked={enabled} onCheckedChange={setEnabled} />
<Label htmlFor="mode">{enabled ? "Enabled" : "Disabled"}</Label>
</div>
)
}Usage
Settings list
Common pattern: a list of toggleable settings.
Email notifications
Delivered to your inbox.
Push notifications
Delivered to your inbox.
Marketing emails
We respect your inbox.
Disabled
Disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | — | Controlled on/off state. |
| defaultChecked | boolean | false | Uncontrolled initial state. |
| onCheckedChange | (checked: boolean) => void | — | Callback when the toggle state changes. |
| disabled | boolean | false | Prevents interaction. |
| required | boolean | false | Required in form context. |
| name | string | — | Form field name for submission. |
| value | string | "on" | Value submitted when the switch is on. |
| className | string | — | Additional classes. |
* Required props
Accessibility
- →Has role='switch' — screen readers announce 'on' or 'off' states.
- →Space key toggles the switch. Enter activates it.
- →Always pair with a Label for a descriptive accessible name.
- →Prefer Switch over Checkbox when the setting takes immediate effect — semantically clearer.