Switch

Switches allow users to turn an individual option on or off.

Focus mode

<Switch>
  <SwitchControl />
  <Label>Focus mode</Label>
</Switch>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/switch

Use switch for communicating activation (e.g. on/off states), while checkboxes are best used for communicating selection (e.g. multiple table rows).

import { Label } from "@/components/ui/field";
import { Switch, SwitchControl } from "@/components/ui/switch";

<Switch>
	<SwitchControl />
	<Label>Focus mode</Label>
</Switch>

Use the controls below to experiment with different switch props and see the live preview and code update.

Airplane mode

label

size

isDisabled

isReadOnly

<Switch>
  <SwitchControl />
  <Label>Airplane mode</Label>
</Switch>

A switch allows a user to turn a setting on or off.

Prop	Type	Default
	`"lg" \| "md" \| "sm"`	`'md'`
	`ReactNode \| function`	`—`
	`boolean`	`—`
	`RefObject<HTMLInputElement \| null>`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`DOMRenderFunction<"div", SwitchFieldRenderProps>`	`—`

	`function`	`—`

Last updated on 5/22/2026