Checkbox
A 16px checkbox built on React Aria. Checked and indeterminate states render the primary gradient with the Figma inner highlight, and the tick draws itself on with a stroke animation.
Installation
You can add this checkbox component using our CLI or manually:
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add checkboxSizes
Two sizes via the size prop - md (16px, the default) and sm (14px, used in dense tables).
<Checkbox size="md" defaultSelected /> {/* 16px (default) */}<Checkbox size="sm" defaultSelected /> {/* 14px */}Labels & control
Pass children for a label - React Aria associates it with the input automatically. Use isSelected + onChange for controlled state, or defaultSelected for uncontrolled.
{/* children become the label - clicking it toggles the box */}<Checkbox defaultSelected>Remember me</Checkbox><Checkbox>Send me product updates</Checkbox>
{/* Controlled */}<Checkbox isSelected={checked} onChange={setChecked}>Terms</Checkbox>Card
Selectable card with a title and optional description - the whole card toggles the checkbox and shows a hover background. It's a separate registry item: npx boardui add checkbox-card.
import { CheckboxCard } from "@/components/base/checkbox/checkbox-card";
<CheckboxCard title="Item title" description="This is for you to check." /><CheckboxCard defaultSelected title="Item title" description="This is for you to check." /><CheckboxCard title="No description" />