Switch

Turns a setting on or off immediately.

Code

import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

<div className="flex items-center gap-2">
  <Switch id="notifications" defaultChecked />
  <Label htmlFor="notifications">Email notifications</Label>
</div>

Examples

Example source

var P = window.PUI, h = React.createElement;
  ReactDOM.createRoot(document.getElementById('preview')).render(h('div', { className: 'pui-row' },
    h('div', { className: 'pui-inline' }, h(P.Switch, { id: 's1', defaultChecked: true }), h(P.Label, { htmlFor: 's1' }, 'Email notifications')),
    h('div', { className: 'pui-inline' }, h(P.Switch, { id: 's2' }), h(P.Label, { htmlFor: 's2' }, 'Dark mode'))));

Usage

What you provide

id + Label; checked / onCheckedChange. size: sm | default.
The label names the setting, not the action: "Email notifications", not "Turn on notifications".
If the change only applies after "Save", use Checkbox.

Accessibility

For binary settings that take effect immediately; if the change needs confirmation, use a checkbox in a form.
The label names the setting and never changes with the state, so the announced name stays stable.
Clicking the switch or its label toggles it; hover gives feedback. Tab reaches it and Space toggles it.
Screen readers hear the label, the switch role and the on/off state; there is no mixed state.

Adapted from Magoo 1.6.0 by Marcelo Sales: Switch (switch). Magoo is educational guidance; test the behavior in your implementation.

API

Install with:

npx @aline-aroucha/pui add switch

<Switch />
<Label />

Switch

Name	Type	Default
`checked`	`boolean`	—
Controlled state.
`defaultChecked`	`boolean`	`false`
Initial state when uncontrolled.
`onCheckedChange`	`(checked: boolean) => void`	—
Runs when the state changes.
`size`	`"sm" \| "default"`	`"default"`
Switch size.
`disabled`	`boolean`	`false`
Blocks changes.