Switch

A switch for toggling a binary state.

Airplane mode

Installation


pnpm dlx shadcn@latest add @shark/switch


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


<Switch />

Use the checked and onCheckedChange props to control the switch state programmatically.

Enable notifications

❌

Use the invalid prop on the Field or in the Switch component to mark the switch as invalid.

Accept terms and conditions

Use the disabled prop to disable the switch.

Marketing emails

Use FieldDescription to add a description to the switch.

Share across devices

Focus is shared across devices, and turns off when you leave the app.

Use a card-style layout with the switch for a more prominent display.

Enable notifications

You can enable or disable notifications at any time.

Integrate the switch into a form with proper validation and error handling.

The switch size is controlled by the [--size-*] CSS variable.

Toggle switch for on/off state. Use with a form control.

Prop	Type	Default
`checked`	`boolean`	`-`
`defaultChecked`	`boolean`	`false`
`disabled`	`boolean`	`false`
`invalid`	`boolean`	`false`
`name`	`string`	`-`
`value`	`string \| number`	`"on"`
`onCheckedChange`	`(details: CheckedChangeDetails) => void`	`-`
`className`	`string`	`-`

Attribute	Default
`--size`	`--spacing(4)`

For a complete list of props, see the Ark UI documentation.

On This Page