Checkbox
Checkbox is a styled binary or mixed-state form choice built on Atom Checkbox.
Built from the published package
Know when Checkbox is the right part
Use it when
Use it for independent submitted choices that can be checked or unchecked.
Choose another path when
Use Toggle for persistent commands, RadioGroup for one choice from a set, and CheckboxGroup when related choices need group ownership.
Installation and imports
The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:
Add the modular stylesheet for every other Brick component the route renders.
Do not combine modular styles with styles.css or tokens.css.
Quick start
Visual recipes and states
Size changes the complete row and visual control. Atom states drive checked, mixed, unchecked, disabled, invalid, hover, active, and focus-visible output.
Examples
API
Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.
Public exports are Checkbox, CheckboxProps, and CheckboxSize.
| Prop | Values | Default |
|---|---|---|
size | sm, md, lg | md |
asChild | boolean | false |
Checkbox inherits Atom checked/defaultChecked (boolean | "indeterminate"),
change, required, disabled, invalid, name, value, form, and native props.
asChild: true requires one element and excludes render; otherwise render
and normal children are available.
Accessibility
Atom owns checkbox semantics, keyboard activation, state, form participation, and focus. Provide a clear label, do not express state only by color, and use indeterminate only when its group meaning is understandable.
Responsive behavior
The row can wrap while the visual control keeps its target size. Logical spacing supports RTL; surrounding form layout owns breakpoints.
Styling and tokens
Customization
Use size and state props first, then semantic and public Checkbox tokens.
Customize the root with className/style; do not replace private marks.
Tokens and CSS hooks
Stable public root hook/slot is .brick-checkbox/checkbox, with Atom state
attributes and data-size. Public component tokens are
--brick-checkbox-target-min-size, --brick-checkbox-control-size,
--brick-checkbox-row-padding-inline, --brick-checkbox-gap,
--brick-checkbox-radius, --brick-checkbox-border-width,
--brick-checkbox-control-background, --brick-checkbox-control-border,
--brick-checkbox-control-checked-background,
--brick-checkbox-control-checked-foreground,
--brick-checkbox-indicator-size, --brick-checkbox-label-foreground,
--brick-checkbox-description-foreground, and
--brick-checkbox-invalid-foreground. Internal mark DOM is not composable.
Advanced reference
Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.