Switch

A control that allows the user to toggle between on and off states.

Installation

bash
npx shadcn@latest add switch

Import

import { Switch } from "@/components/ui/switch"import { Label } from "@/components/ui/label"

Default

With label

Checked by default

Disabled

Settings panel

Props

PROPTYPEDEFAULTDESCRIPTION
checkedboolean—Controlled checked state
defaultCheckedbooleanfalseInitial state (uncontrolled)
onCheckedChange(checked: boolean) => void—Called when toggled
disabledbooleanfalseDisables the switch
requiredbooleanfalseMarks as required in a form
namestring—Form field name

Accessibility

  • Pressing Space toggles the switch
  • Always pair with a Label using matching id/htmlFor