Checkbox
FreeMulti-selection form control for choosing zero or more options from a list. Supports checked, unchecked, indeterminate (for "select all" parents), and disabled states. Always used with a visible label.
12 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Unchecked | Default unchecked state with an empty box. | Starting state for all checkbox options. |
| Checked | Checked state with a checkmark icon and brand-colour fill. | When the option has been selected by the user. |
| Indeterminate | Dash icon indicating partial selection in a group. | Use for "select all" checkboxes when only some children are checked. |
| Disabled | Non-interactive state with reduced opacity. | When the option is unavailable due to permissions or context. |
Usage Guidelines
Do
Always pair with a visible text label.
Don't
Use checkboxes for mutually exclusive options — use Radio instead.
Do
Use indeterminate state for "select all" with partial selection.
Don't
Use a single checkbox for a binary toggle — use Toggle instead.
Do
Group related checkboxes with <fieldset> and <legend>.
Don't
Hide the checkbox and only show the label — the visual state must be clear.
Do
Allow users to click the label text, not just the checkbox.
Don't
Code
HTML
<fieldset>
<legend class="lex-label">Notifications</legend>
<label class="lex-checkbox-row">
<input type="checkbox" class="lex-checkbox" checked />
<span class="lex-checkbox-row__label">Email notifications</span>
</label>
<label class="lex-checkbox-row">
<input type="checkbox" class="lex-checkbox" />
<span class="lex-checkbox-row__label">Push notifications</span>
</label>
</fieldset>CSS Custom Properties
.lex-checkbox {
width: var(--lex-checkbox-size, 18px);
height: var(--lex-checkbox-size, 18px);
border-radius: var(--lex-checkbox-radius, var(--lex-radius-xxs));
border: 1.5px solid var(--lex-checkbox-border);
background: transparent;
appearance: none;
cursor: pointer;
transition: background 150ms ease, border-color 150ms ease;
}
.lex-checkbox:checked {
background: var(--lex-checkbox-bg-checked);
border-color: var(--lex-checkbox-bg-checked);
}React
// Using Lexicon CSS classes with React
export function NotificationPreferences() {
return (
<CheckboxGroup label="Notifications">
<Checkbox value="email" defaultChecked>
Email notifications
</Checkbox>
<Checkbox value="push">
Push notifications
</Checkbox>
</CheckboxGroup>
);
}Design Tokens
| Token | Value (dark) | Value (light) | CSS property |
|---|---|---|---|
| --lex-checkbox-size | — | — | size |
| --lex-checkbox-radius | — | — | radius |
| --lex-checkbox-border | — | — | border |
| --lex-checkbox-bg-checked | — | — | checked |
| --lex-checkbox-icon-color | — | — | color |
Accessibility
- Use native <input type="checkbox"> for built-in semantics.
- Support indeterminate state with aria-checked="mixed" for parent checkboxes.
- Group related checkboxes with <fieldset> and <legend>.
- Togglable with the Space key.