Design System
Checkbox
Lets people select one or more options from a set, or toggle a single setting on or off. eShop platform — supports checked, indeterminate and error states with an optional label and supportive text.
Playground
Selection
Unchecked, checked, indeterminate (mixed / partial selection), and error.
Size
Default (24px box, 16px label) and compact (20px box, 14px label).
Label & supportive text
The box can stand alone, carry a label, add supportive helper text, and mark a required field with an asterisk.
Disabled
Disabled checkboxes use muted fills and content, with a not-allowed cursor.
When to Use
Best for
- Selecting any number of options from a list (zero, one, or many)
- Toggling a single setting or agreement (terms, newsletter opt-in)
- A parent control that reflects a partial selection with the indeterminate state
Consider alternatives when
- Only one option may be selected from a set — use a radio group
- Toggling an immediate on/off action — use a switch or toggle
- Choosing from many options in limited space — use a select or dropdown
Props
| Prop | Type | Required | Description |
|---|---|---|---|
checked | boolean | No | Checked state (controlled). Pair with onChange |
defaultChecked | boolean | No | Initial checked state (uncontrolled, default: false) |
indeterminate | boolean | No | Mixed / partial selection — shows a minus glyph (default: false) |
error | boolean | No | Error state — critical fill, red border, critical helper text (default: false) |
compactSize | boolean | No | 20px box instead of the default 24px (default: false) |
label | string | No | Label text. When omitted, only the box renders |
supportiveText | string | No | Helper text under the label |
required | boolean | No | Show a required asterisk after the label (default: false) |
isDisabled | boolean | No | Disable interaction (default: false) |
onChange | (checked: boolean) => void | No | Change handler — receives the next checked value |
name | string | No | Form field name |
id | string | No | Element id (autogenerated when omitted) |
Import
import { Checkbox } from '@/components/Checkbox/eshop';
Wrap the checkbox (or any ancestor) in <div data-platform="eshop"> so the eShop typography classes apply.
Design Tokens
| Purpose | Token |
|---|---|
| Box fill (unchecked) | var(--color-fill-element-field) |
| Box border (unchecked) | var(--color-border-element-field) |
| Box fill (checked / indeterminate) | var(--color-fill-element-field-selected) |
| Box fill (error) | var(--color-fill-element-critical-soft) |
| Box border (error) | var(--color-border-element-field-error) |
| Box fill (selected disabled) | var(--color-fill-element-bold-disabled) |
| Glyph (check / minus) | var(--color-content-primary-inverse) |
| Label text | var(--color-content-primary) |
| Supportive text | var(--color-content-secondary) |
| Error / required text | var(--color-content-critical) |
| Disabled content | var(--color-content-disabled) |
| Focus ring | var(--color-border-element-focus-ring) |
| Box radius | var(--primitive-radius-4) |
| Typography (label) | .body-md / .body-sm (scoped to [data-platform="eshop"]) |