Native checkbox geometry and optional sibling mark layers. These classes belong to the opt-in Official preset. Add
@presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight
used alongside these structural shortcuts.
Classes
checkbox,checkbox-control,checkbox-indicator,checkbox-indicator-mixed
Example
The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.
<label>
<input class="checkbox focus-ring bg-color:neutral-100 border-color:neutral-700 text-color:primary-950 bg-color:current@::after" type="checkbox" name="updates">
Send me updates
</label>Variants and composition
Use the native checkbox alone, or checkbox-control with checkbox-indicator and checkbox-indicator-mixed for sibling SVG marks. Checked and indeterminate are distinct input states.
The base class supplies mark geometry, not its fill. Set a mark color such
as bg-color:current@::after. For sibling SVG marks, put data-css-peer
on the actual input, and use aria-hidden="true" on each SVG. The two
indicator shortcuts read that input’s checked and indeterminate states.
Behavior and accessibility
Keep the native input for focus, form value, and keyboard use. For a mixed state, set the input’s indeterminate DOM property; CSS cannot set that state.
In forced colors, a native checkbox restores its browser appearance and hides the custom pseudo-element mark. For a custom ARIA checkbox, supply system-color surfaces, marks, and focus as well as its keyboard behavior; do not disable forced-color adjustment to preserve branding.
Reference
See the interactive Storybook specimen. Continue to Collapse or return to the Official preset overview.