components / form

Switch

Toggle an option with immediate effect.

660 B gzip client componentbase ui · switch

email notifications compact mode

switch-default.tsx

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

export default function SwitchDefault() {
  return (
    <div className="flex flex-col gap-4 text-sm">
      <label className="flex items-center justify-between gap-6">
        email notifications <Switch defaultChecked />
      </label>
      <label className="flex items-center justify-between gap-6">
        compact mode <Switch />
      </label>
    </div>
  );
}

Installation

$ npx shadcn@latest add https://cd-ui.vercel.app/r/switch.json

first time? set up components.json and the theme first: see installation.

Usage

import { Switch, SwitchRow } from "@/components/ui/switch"

<Switch defaultChecked />

<SwitchRow title="Weekly digest" description="A summary, once a week." />

Examples

Setting row

SwitchRow puts title, description, and switch in a <label>: the whole row is clickable and the title names the switch.

Weekly digestA summary of activity, once a week.Security alertsOnly for sign-ins from a new device.Priority supportUnavailable on your plan.

switch-row.tsx

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

export default function SwitchRowExample() {
  return (
    <div className="flex w-full max-w-sm flex-col divide-y">
      <SwitchRow className="py-3" defaultChecked description="A summary of activity, once a week." title="Weekly digest" />
      <SwitchRow className="py-3" description="Only for sign-ins from a new device." title="Security alerts" />
      <SwitchRow className="py-3" description="Unavailable on your plan." disabled title="Priority support" />
    </div>
  );
}

API

SwitchRow

Row with title, description, and a switch. className goes on the row; every other prop goes on the Switch. Has a focus ring on the row and a disabled state.

prop	type	default
`title` Main text of the row.	`ReactNode`	-
`description` Secondary text, below the title.	`ReactNode`	-
`className` Extra classes, merged with `cn` (yours wins).	`string`	-

Switch

Base UI · Switch.Root

Toggle. Use it for immediate effect; for "apply later", prefer Checkbox.

prop	type	default
`checked · defaultChecked` Controlled or initial state.	`boolean`	-
`onCheckedChange` Called when toggled.	`(checked: boolean) => void`	-
`className` Extra classes, merged with `cn` (yours wins).	`string`	-

Keyboard

key	action
`SpaceEnter`	Toggles.

import { Switch } from "@/components/ui/switch"; export default function SwitchDefault() { return ( <div className="flex flex-col gap-4 text-sm"> <label className="flex items-center justify-between gap-6"> email notifications <Switch defaultChecked /> </label> <label className="flex items-center justify-between gap-6"> compact mode <Switch /> </label> </div> ); }

Examples

Setting row

SwitchRow puts title, description, and switch in a <label>: the whole row is clickable and the title names the switch.

Weekly digestA summary of activity, once a week.Security alertsOnly for sign-ins from a new device.Priority supportUnavailable on your plan.

switch-row.tsx

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

export default function SwitchRowExample() {
  return (
    <div className="flex w-full max-w-sm flex-col divide-y">
      <SwitchRow className="py-3" defaultChecked description="A summary of activity, once a week." title="Weekly digest" />
      <SwitchRow className="py-3" description="Only for sign-ins from a new device." title="Security alerts" />
      <SwitchRow className="py-3" description="Unavailable on your plan." disabled title="Priority support" />
    </div>
  );
}

API

SwitchRow

Row with title, description, and a switch. className goes on the row; every other prop goes on the Switch. Has a focus ring on the row and a disabled state.

prop	type	default
`title` Main text of the row.	`ReactNode`	-
`description` Secondary text, below the title.	`ReactNode`	-
`className` Extra classes, merged with `cn` (yours wins).	`string`	-

Switch

Base UI · Switch.Root

Toggle. Use it for immediate effect; for "apply later", prefer Checkbox.

prop	type	default
`checked · defaultChecked` Controlled or initial state.	`boolean`	-
`onCheckedChange` Called when toggled.	`(checked: boolean) => void`	-
`className` Extra classes, merged with `cn` (yours wins).	`string`	-

key

action

SpaceEnter

Toggles.