Checkbox
An independent yes or no that applies when the form is submitted. The ticked box is the accent with an ink mark; use Switch for settings that apply at once.
bunx --bun shadcn@4.17.0 add @waimakers/checkbox- npm dependencies
- @base-ui/react@1.9.0lucide-react@1.33.0
From the registry
The shadcn Checkbox on Base UI, not Radix. The ticked box is the accent with its paired ink glyph, because a tick is a mark a person made and the brand's spark marks what a person did; the focus ring is the kit's --text ring rather than orange, which fails WCAG SC 1.4.11 on white. Its edge is the 3:1 control border; an indeterminate box draws a dash instead of the tick; a 32px hit area around the 16px box takes the pointer; aria-invalid draws a 2px --danger edge, the border plus a solid 1px ring, never an opacity fade, measured at 4.38:1 or better on every ground. dark:bg-input/30 is dropped — dark is a token set here, not a variant. It carries no label of its own: Base UI renders a span beside a hidden input, so every caller supplies an id and a Label htmlFor, or an aria-label.
Examples
States
Unchecked, checked, indeterminate, disabled, invalid and focused.
Select all
A parent checkbox goes indeterminate when only some of its children are ticked.
With a description
A horizontal Field puts a hint under the label and keeps the whole row clickable.
The agent deletes raw transcripts after a month and keeps only the summaries.