Checkbox
atomLabelled checkbox with checked, indeterminate, and disabled states. Available in three sizes (sm/md/lg). The contained prop wraps the checkbox in a border-strong container — checked fills with a neutral color-mix(textPrimary 6%) background, unchecked is transparent outline only. No hover state on contained wrappers. Ideal for plan selection and feature toggles.
States
Checked, indeterminate, disabled, and disabled-checked.
Sizes
Three sizes — sm, md, and lg.
Contained
Border-strong container with neutral checked fill — great for plan selection cards.
Usage
Installation
API Reference
Checkbox props — * required
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Text label next to the checkbox. |
checked | boolean | — | Controlled checked state. |
defaultChecked | boolean | — | Uncontrolled initial checked state. |
indeterminate | boolean | false | Visually indeterminate state (dash icon), used for parent checkboxes. |
disabled | boolean | false | Prevents interaction. |
size | "sm" | "md" | "lg" | "md" | Checkbox size. |
contained | boolean | false | Wraps the checkbox in a border-strong container. Checked fills with neutral color-mix(textPrimary 6%) background; unchecked is transparent. |
helperText | string | — | Secondary text displayed below the label. |
onChange | (e: React.ChangeEvent<HTMLInputElement>) => void | — | Change handler. |