Checkbox
Carbon-spec checkbox. Wraps Radix Checkbox for ARIA + keyboard. Adds Carbon's label / helper text / state structure on top.
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
Edit JSX — preview updates livereact-live
import { Checkbox } from "@avala/design"; <Checkbox>Checkbox</Checkbox>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
primitives-checkbox--defaultOpen in Storybook →
When to use
- Multi-of-many selection — any subset of options can be on at once.
- Single boolean toggle that lives inside a form (consent, "remember me", subscribe).
- Indeterminate states (e.g. "select all" when only some children are selected).
When not to use
- Single-of-many selection → use `RadioButton` inside a
RadioButtonGroup. - Settings-row on/off control with explicit Off / On text → use `Toggle`.
- Compact iOS-style switch → use `Switch`.