Forms

Switch

A binary toggle with switch semantics.

StableUsed in Aback Tools, Aback LaunchRegistry JSON

Usage analytics

Share anonymous product usage data.

Product newsletter

One email a month with new components.

Analytics is on. Newsletter is off.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add switch

Writes components/ui/switch.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

import { Switch } from "@/components/ui/switch";

Props and composition points for Switch. Native element props pass through.

Prop	Type	Default	Description
`checked / defaultChecked`	`boolean`	None	Controlled or uncontrolled on state.
`onCheckedChange`	`(checked: boolean) => void`	None	Fires when the user toggles the control.
`disabled`	`boolean`	None	Prevents interaction and reduces opacity.
`name / value / required`	`string / string / boolean`	None	Native form integration through a hidden input managed by Radix.

Dependencies: radix-ui, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

Radix exposes role switch and aria-checked, and Space or Enter toggles it.
Use a switch for a setting that takes effect immediately, not for a form choice that needs saving.
Pair with a visible Label and, where useful, a description of the effect.
The state is conveyed by thumb position and aria-checked, not by color alone.

Key	Action
`Enter`or`Space`	Toggle the switch.
`Tab`	Move focus into or out of the control.

The Aback products whose interfaces shaped this component.