Checkboxes

Usage and anatomy

Checkbox combines an accessible control with a separate label. Use <Checkbox /> for the interactive state and connect <Label /> with a matching htmlFor value.

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

<div className="flex plumeui-wr plumeui-oaa">
  <Checkbox id="email-notifications" defaultChecked />
  <Label htmlFor="email-notifications">Email notifications</Label>
</div>

Use a clear, unique id for every checkbox so its label remains clickable.
Use descriptions for supporting context and choice cards when the entire option should feel selectable.
Use Button for submitting or confirming a group of checkbox choices.

Checkbox States

Checkbox Sizes

Checkbox Disabled States

Checkbox with Description

Checkbox Choice Cards

Checkbox with Form

API reference

Checkbox

Prop	Type	Default
size	md \| lg	md
checked	boolean \| indeterminate	—
disabled	boolean	false

Checkbox also accepts native Radix checkbox props such as defaultChecked, onCheckedChange, and aria-invalid.