Components
Checkbox
A binary selection control built on React Aria. Supports an indeterminate state, optional label/hint text, and two sizes - driven from config/design-system.config.ts.
Contextual config
Checkbox sections
Show or hide documentation sections on this page. Changes apply immediately and persist across the site.
Component Playground
Live instance - the controls read their options from the same config that drives the Variants section below.
sm ยท selectedControls
Size
Label
Hint
States
Unchecked, checked, and indeterminate - used for a parent checkbox representing a partially-selected group.
Unchecked / checked / indeterminate
Sizes
Two sizes - sm (default) and md.
Small / Medium
Disabled
Disabled dims the control and prevents interaction, in both the unchecked and checked states.
Disabled - unchecked / checked / indeterminate
With label
Pass a label to pair the control with descriptive text. The whole row becomes clickable.
Labelled
With hint text
Add a hint for supporting detail beneath the label.
Labelled with hint
Group
A stacked list of checkboxes - the common pattern for multi-select filters and settings lists.
Checkbox list
API
| Prop | Type | Default |
|---|---|---|
size | "sm" | "md" | "sm" |
label | ReactNode | - |
hint | ReactNode | - |
isSelected | boolean | - |
defaultSelected | boolean | false |
isIndeterminate | boolean | false |
isDisabled | boolean | false |
onChange | (isSelected: boolean) => void | - |
className | string | - |
Token anatomy
Checked and indeterminate share the same brand-filled treatment. Swap --ui-bg-brand-solid to rebrand every checked control at once.
| State | Background token | Ring token |
|---|---|---|
| Unchecked | bg-primary | ring-primary |
| Checked / indeterminate | bg-brand-solid | ring-brand-solid |
| Disabled + unchecked | bg-tertiary | ring-primary |
| Focus-visible outline | - | outline-focus-ring |
Usage
import { Checkbox } from "@/components/base/checkbox/checkbox";
<Checkbox label="Remember me" defaultSelected />Figma
No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.