Checkbox

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add checkbox

Usage#

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

export function Example() {
  return (
    <label htmlFor="terms" className="flex items-center gap-2.5">
      <Checkbox id="terms" defaultChecked />
      Accept terms and conditions
    </label>
  )
}

States#

Checked and indeterminate both fill with the accent (brand) color; indeterminate shows a minus rather than a check. Drive the tri-state by passing checked="indeterminate".

Sizes#

sm (16px) sits inside dense tables; md (20px) is the default for forms. The indicator scales with the box.

With a label#

Checkbox renders only the box; pair it with a <label htmlFor> for an accessible name and a larger hit target. With a description, nudge the box to the first line.

Select all (indeterminate)#

A parent checkbox reads true when all children are checked, "indeterminate" on a partial selection, and false when none are. The same pattern the DataTable header uses.

FAQ#