Form

Switch

On/off toggle rendered as a native checkbox with role="switch", with an optional clickable label.

Import

import { Switch } from "@zephora/react";

Wi-FiBluetoothAirplane mode

<Switch defaultChecked>Wi-Fi</Switch>
<Switch>Bluetooth</Switch>
<Switch disabled>Airplane mode</Switch>

Dark mode off

const [dark, setDark] = React.useState(false);

<Switch checked={dark} onCheckedChange={setDark}>
  Dark mode {dark ? "on" : "off"}
</Switch>

SmallMediumLarge

<Switch size="sm">Small</Switch>
<Switch size="md">Medium</Switch>
<Switch size="lg">Large</Switch>

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled checked state.
`defaultChecked`	`boolean`	`false`	Initial checked state (uncontrolled).
`onCheckedChange`	`(checked: boolean) => void`	—	Called with the next checked state.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Control size.
`children`	`ReactNode`	—	Optional label content; the label wraps the control so it is clickable.
`unstyled`	`boolean`	`false`	Headless mode — drops Zephora classes so your own CSS can style it.
`…rest`	`InputHTMLAttributes<HTMLInputElement>`	—	Remaining native input props (name, disabled…) are forwarded.

Key	Action
`Space`	Toggles the switch.
`Tab`	Moves focus.