Switch

The macOS 27 toggle with a pill-shaped knob, in mini, small, medium and large sizes.

@cupertinoui/switchBase UI Switch Registry JSON

Wi-Fi

"use client"

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

export default function SwitchDemo() {
  return (
    <div className="flex w-64 items-center justify-between">
      <Label htmlFor="wifi">Wi-Fi</Label>
      <Switch id="wifi" defaultChecked />
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/switch

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

<Switch defaultChecked aria-label="Wi-Fi" />

Examples

Sizes

Mini (36×16), small (44×20), medium (54×24) and large (64×28). System Settings uses mini switches in its grouped forms.

"use client"

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

export default function SwitchSizes() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      <Switch size="mini" defaultChecked aria-label="Mini" />
      <Switch size="sm" defaultChecked aria-label="Small" />
      <Switch defaultChecked aria-label="Medium" />
      <Switch size="lg" defaultChecked aria-label="Large" />
      <Switch disabled aria-label="Disabled" />
    </div>
  )
}

API Reference

Every part forwards the props of the underlying Base UI Switch part. The props below are the ones CupertinoUI adds or changes.

Switch

Prop	Type	Description
`size`	`"mini" \| "sm" \| "default" \| "lg"` Default: `"default"`	The control size.
`checked`	`boolean`	The controlled state.
`onCheckedChange`	`(checked: boolean) => void`	Called when the switch is toggled.
`className`	`string`	Extra classes, merged with the component's own.