CupertinoUI

Show in menu bar Open at login

"use client"

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

export default function CheckboxDemo() {
  return (
    <div className="flex flex-col gap-2.5">
      <Label className="gap-[5px] font-medium">
        <Checkbox defaultChecked /> Show in menu bar
      </Label>
      <Label className="gap-[5px] font-medium">
        <Checkbox /> Open at login
      </Label>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/checkbox

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

Usage

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

<Label>
  <Checkbox /> Open at login
</Label>

Examples

States

Off, on, mixed and disabled. In an inactive window a checked box turns grey.

Off On Mixed Disabled

"use client"

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

export default function CheckboxStates() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <Label className="gap-[5px] font-medium">
        <Checkbox /> Off
      </Label>
      <Label className="gap-[5px] font-medium">
        <Checkbox defaultChecked /> On
      </Label>
      <Label className="gap-[5px] font-medium">
        <Checkbox indeterminate /> Mixed
      </Label>
      <Label className="gap-[5px] font-medium">
        <Checkbox disabled defaultChecked /> Disabled
      </Label>
    </div>
  )
}

Mixed state

A parent checkbox shows the mixed state when only some of its children are on.

"use client"

import * as React from "react"

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

const items = ["Hard disks", "External disks", "CDs, DVDs and iPods", "Connected servers"]

// A parent checkbox that shows the mixed state when only some children are on.
export default function CheckboxGroup() {
  const [checked, setChecked] = React.useState<string[]>(["External disks"])
  const all = checked.length === items.length
  const some = checked.length > 0 && !all

  return (
    <div className="flex flex-col gap-2">
      <Label className="gap-[5px] font-semibold">
        <Checkbox
          checked={all}
          indeterminate={some}
          onCheckedChange={(value) => setChecked(value ? items : [])}
        />
        Show these items on the desktop:
      </Label>
      <div className="flex flex-col gap-2 pl-[21px]">
        {items.map((item) => (
          <Label key={item} className="gap-[5px] font-medium">
            <Checkbox
              checked={checked.includes(item)}
              onCheckedChange={(value) =>
                setChecked((current) =>
                  value ? [...current, item] : current.filter((entry) => entry !== item)
                )
              }
            />
            {item}
          </Label>
        ))}
      </div>
    </div>
  )
}

API Reference

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

Checkbox

Prop	Type	Description
`checked`	`boolean`	The controlled state. Use defaultChecked for an uncontrolled checkbox.
`indeterminate`	`boolean` Default: `false`	Shows the mixed state, e.g. for a parent of checkboxes where only some are on.
`onCheckedChange`	`(checked: boolean) => void`	Called when the state changes.
`disabled`	`boolean`	Prevents interaction.
`className`	`string`	Extra classes, merged with the component's own.