Switch

Default

Bound with v-model.

Import the parts you need from the component's folder.

ts

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

Pair with a Label for click targets.

Wi-Fi

Add a muted description under the label to explain what the toggle controls.

Marketing emails

Receive emails about new products.

The size prop offers sm and default. For anything larger, scale with a utility class such as scale-125.

Small

Default

Large

Disable input.

Locked

Set data-invalid on the Field and aria-invalid on the Switch, then use FieldError for the message.

Push notifications

Turn this on to receive alerts on your devices.

Enable notifications to continue.

Wrap each Field inside a FieldLabel to turn switches into selectable cards. The active card is highlighted automatically.

Security alerts

Get notified about unusual sign-in activity.

Automatic backups

Back up your workspace every night.

Prop	Type	Default	Description
`modelValue`	`boolean`	`false`	Checked state. Supports v-model.
`defaultValue`	`boolean`	`false`	Initial state when v-model is not used.
`disabled`	`boolean`	`false`	Disable input.
`id`	`string`	—	Match with a Label for prop.

Event	Description
`update:modelValue`	Fires with the new checked state. Enables v-model.

Slot	Description
`thumb`	Override the sliding thumb content (e.g. an icon).

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Space`	Toggles the switch when focused.
`Enter`	Toggles the switch when focused.
`Tab`	Moves focus to or from the switch.