Switch

A control that toggles a single setting on or off, built on Radix UI's Switch primitive.

Install

npx shadcn@latest add https://atomx.acau.net/r/switch.json

Use Switch for a single on/off setting that takes effect immediately — typical examples are "Enable notifications" or "Dark mode". For toggles that are submitted as part of a form rather than committed instantly, prefer Checkbox.

Always pair Switch with a Label so the toggle's purpose is announced to screen readers and the entire row is clickable.

Preview

Default

Airplane mode

On by default

Email notifications

Disabled

Disabled, off

Disabled, on

Props

Extends React.ComponentProps<typeof SwitchPrimitive.Root>. All Radix Switch props are forwarded.

Prop	Type	Notes
`checked`	`boolean`	Controlled checked state.
`defaultChecked`	`boolean`	Initial state for uncontrolled usage.
`onCheckedChange`	`(checked: boolean) => void`	Fired when the user toggles the switch.
`disabled`	`boolean`	Disables interaction and applies muted styling.
`required`	`boolean`	Marks the underlying input as required for form submission.
`name`	`string`	Name attribute on the underlying form input.