Switch

A control for toggling between checked and unchecked states.

$bunx shadcn@latest add @nx-ui/switch

Installs withutils

Pair a Switch with a Label using a matching id. Clicking the label toggles the control.

Off

Default and small.

Default

Small

Drive `checked` and `onCheckedChange` yourself to react to the toggle.

Auto-dispatch disabled

Disabled dims and blocks interaction; aria-invalid draws the destructive ring for validation errors.

Disabled, off

Disabled, on

Read-only

Invalid

Switches inside Field/FieldLabel rows, used as a notification preferences panel for a composting site's alert feed.

Weighbridge alerts

Notify when a load at Hartfield Composting Site fails tolerance checks.

Permit breach warnings

Flag movements that exceed Cranbourne Organics' environmental permit limits.

Haulier ETA updates

Ping the ops board when a driver is within 15 minutes of Ashdown Transfer Station.

Email digest

Send a daily summary of all site alerts at 6pm.

API reference

Exported parts and their props, extracted from the component source.

Prop	Type	Default	Description
`size`	`"sm" \| "default"`	`"default"`	—

…extends SwitchPrimitive.Root.Props