Primitive / Atomstable

Switch

On/off control built on Radix switch primitive.

@glinui/uiComponent: switch

Installation$

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add switch

Usage$

The Switch component wraps the Radix UI switch primitive with a fixed h-6 w-11 track and h-5 w-5 thumb.

TSX

1import { Switch } from "@glinui/ui"
2
3export function SwitchBasicDemo() {
4return <Switch aria-label="Enable setting" />
5}

With Label$

Airplane mode

TSX

1import { Switch } from "@glinui/ui"
2
3export function SwitchLabelDemo() {
4return (
5  <div className="flex items-center gap-2">
6    <Switch id="airplane" />
7    <label htmlFor="airplane" className="text-sm">Airplane mode</label>
8  </div>
9)
10}

Examples$

Default Checked$

Enable notifications

TSX

1import { Switch } from "@glinui/ui"
2
3export function SwitchDefaultCheckedDemo() {
4return (
5  <div className="flex items-center gap-2">
6    <Switch id="notifications" defaultChecked />
7    <label htmlFor="notifications" className="text-sm">Enable notifications</label>
8  </div>
9)
10}

Disabled$

Disabled (off)

Disabled (on)

TSX

1import { Switch } from "@glinui/ui"
2
3export function SwitchDisabledDemo() {
4return (
5  <div className="flex flex-col gap-3">
6    <div className="flex items-center gap-2">
7      <Switch id="disabled-off" disabled />
8      <label htmlFor="disabled-off" className="text-sm text-neutral-500">Disabled (off)</label>
9    </div>
10    <div className="flex items-center gap-2">
11      <Switch id="disabled-on" disabled defaultChecked />
12      <label htmlFor="disabled-on" className="text-sm text-neutral-500">Disabled (on)</label>
13    </div>
14  </div>
15)
16}

With Form Label$

Marketing emails

Receive emails about new products and features.

TSX

1import { Switch } from "@glinui/ui"
2
3export function SwitchFormDemo() {
4return (
5  <div className="flex items-center justify-between rounded-lg border border-border/60 p-4">
6    <div className="space-y-0.5">
7      <p className="text-sm font-medium">Marketing emails</p>
8      <p className="text-sm text-neutral-500">Receive emails about new products and features.</p>
9    </div>
10    <Switch id="marketing" aria-label="Marketing emails" />
11  </div>
12)
13}

Accessibility$

Built on @radix-ui/react-switch which renders a native button with role="switch".
Associates with a visible label via htmlFor / id pairing, or via aria-label when no visual label element is present.
Keyboard togglable with Space and Enter.
aria-checked is managed automatically by the primitive.

Reduced Motion$

The thumb slide transition respects prefers-reduced-motion and removes the transform animation when enabled.

API Reference$

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.

Source$

TSX

1import { Switch } from "@glinui/ui"

packages/ui/src/components/switch.tsx

Generated API Snapshot

Beta

Auto-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.