Primitive / Atomstable
Switch
On/off control built on Radix switch primitive.
@glinui/uiComponent: switch
Installation
Install from the package for shared ownership or from the registry for copy-paste control.
Package Manager
pnpm add @glinui/ui @glinui/tokensRegistry
pnpm dlx @glinui/cli@latest add switchUsage
Basic
TSX
1import { Switch } from "@glinui/ui"23export function Demo() {4 return (5 <label className="flex items-center gap-2 text-sm">6 <Switch /> Notifications7 </label>8 )9}
Disabled
TSX
1import { Switch } from "@glinui/ui"23export function Demo() {4 return (5 <label className="flex items-center gap-2 text-sm opacity-50">6 <Switch disabled /> Disabled7 </label>8 )9}
Accessibility
- Built on Radix Switch with `role="switch"`.
- Pair with `<label>` for context.
Keyboard Interactions
| Key | Action |
|---|---|
| Space | Toggle the switch on/off. |
ARIA Attributes
- `role="switch"`
- `aria-checked`
Reduced Motion
Thumb slide transition respects `prefers-reduced-motion`.
Affected properties
transformAPI Reference
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
checked | boolean | No | - | Controlled on/off state. |
defaultChecked | boolean | No | - | Initial state. |
onCheckedChange | (checked: boolean) => void | No | - | Change handler. |
disabled | boolean | No | false | Disables interaction. |
name | string | No | - | Form field name submitted with form data. |
required | boolean | No | - | Marks the switch as required within a form. |
value | string | No | - | Value submitted with the form when checked. |
variant | "default" | "glass" | "frosted" | "liquid" | "matte" | No | "default" | Variant option from switchVariants. |
Source
Import directly from the package or browse the source on GitHub. Click any file to view it.
Generated API Snapshot
Beta
Generated API Snapshot
BetaAuto-extracted from TypeScript source in packages/ui/src/components/switch.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.
Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata
Primary Props Type
SwitchProps
SwitchProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
checked | boolean | No | - | Controlled checked state. |
defaultChecked | boolean | No | - | Initial checked state for uncontrolled usage. |
disabled | boolean | No | - | Prevents interaction and applies muted styling. |
name | string | No | - | Form field name submitted with form data. |
onCheckedChange | (checked: boolean) => void | No | - | Callback fired when the checked state changes. |
required | boolean | No | - | Marks the switch as required within a form. |
value | string | No | - | Value submitted with the form when checked. |
variant | "default" | "glass" | "frosted" | "liquid" | "matte" | No | "default" | Variant option from switchVariants. |