Checkbox
For independent options and multi-select. Indeterminate shows a partly selected parent.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<fieldset class="px-choice-group">
<legend>Notifications</legend>
<label class="px-check"><input type="checkbox" class="px-check__box" checked> Product updates <span class="px-check__hint">News about features and improvements.</span></label>
<label class="px-check"><input type="checkbox" class="px-check__box"> Weekly digest <span class="px-check__hint">A summary of activity every Monday.</span></label>
<label class="px-check"><input type="checkbox" class="px-check__box" data-px-indeterminate> Team mentions</label>
</fieldset>Usage
- The whole row is the click target.
- Use a Switch for settings that apply at once.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
States
Default, checked, indeterminate, disabled and error.
<div class="row">
<label class="px-check"><input type="checkbox" class="px-check__box"> Default</label>
<label class="px-check"><input type="checkbox" class="px-check__box" checked> Checked</label>
<label class="px-check"><input type="checkbox" class="px-check__box" data-px-indeterminate> Indeterminate</label>
<label class="px-check"><input type="checkbox" class="px-check__box" disabled> Disabled</label>
<label class="px-check"><input type="checkbox" class="px-check__box" checked disabled> Disabled on</label>
<label class="px-check"><input type="checkbox" class="px-check__box" aria-invalid="true"> Error</label>
</div>Small
px-check--sm (16px box).
<label class="px-check px-check--sm"><input type="checkbox" class="px-check__box" checked> Remember me <span class="px-check__hint">Save my login details for next time.</span></label>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-check | class | Label wrapper (row). |
px-check__box | class | Put on <input type="checkbox">. |
px-check__hint | class | Hint under the label. |
px-check--sm | class | Small size. |
aria-invalid="true" | attribute | Error state. |
data-px-indeterminate | attribute | Sets indeterminate on load. |
Figma properties
Checkbox72 variants · page “Checkbox & Radio Buttons”Open
Checkbox with label and optional hint. Use for independent options and multi-select; Indeterminate shows a partially selected parent. Click target is the whole row. RTL variants place the control on t…
| Property | Type | Values |
|---|---|---|
| Label | Text | “Remember me” |
| Hint | Text | “Save my login details for next time.” |
| Show hint | Boolean | — |
| Size | Variant | Small Medium |
| Checked | Variant | False True Indeterminate |
| State | Variant | Active Hover Pressed Focused Disabled Error |
| Direction | Variant | LTR RTL |
Checkbox / Control36 variants · page “Checkbox & Radio Buttons”Open
The bare checkbox box. Use inside Checkbox, tables and list items. Tokens: --px-selection-*, --px-checkbox-*.
| Property | Type | Values |
|---|---|---|
| Size | Variant | Small Medium |
| Checked | Variant | False True Indeterminate |
| State | Variant | Active Hover Pressed Focused Disabled Error |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-selection-gap | spacing-sm | 8px |
--px-checkbox-size-sm | spacing-16 | 16px |
--px-checkbox-size-md | spacing-20 | 20px |
--px-checkbox-radius | radius-4 | 4px |
Accessibility
- Group related boxes in a <fieldset> with a <legend>.
- Space toggles.