Switch

A switch for toggling a binary state.

Airplane mode

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/switch.json


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