Skip to content

Checkbox

A checkbox allows users to select one or more options from a set.

Ready to use

Design Develop Accessibility

The Checkbox lets a user select one or more options from a list. Unlike radio buttons, checkboxes are non-exclusive — every option toggles independently. Reach for one when more than one selection is valid, when the selection doesn’t trigger an immediate action, or when the user needs to confirm or accept conditions before moving on.

This component is fully responsive and intentionally designed across mobile, tablet, and desktop — no alternative versions required.

Anatomy

Section titled “Anatomy”

  1. Box — the toggleable square

  2. Check mark — appears in the Selected state

  3. Label — clickable text, paired to the input

  4. Optional helper / error text

When to use it

Section titled “When to use it”

Use a Checkbox when:

  • The user can select 0, 1, or multiple options.
  • The options aren’t mutually exclusive.
  • You’re collecting preferences, filters, settings, or “I agree to…” confirmations.

Avoid a Checkbox when:

  • Only one option in the set can be selected — that’s a Radio button.
  • The action is binary and takes effect immediately — that’s a Switch (toggle).

Properties

Section titled “Properties”

Box

The toggleable square itself. Carries the visible state — Default, Hover, Selected, Disabled, Disabled+Selected, Focus — each driven by its own design-token set. The Focus ring is the global focus token so it stays consistent across every form control.

Check mark

Renders inside the box in Selected and Disabled+Selected states. Decorative — the checked state is conveyed semantically via the native <input type="checkbox">.

Label

The clickable text paired to the input via for/id (or by wrapping the input in the <label>). Always visible; never hide the label or replace it with an icon-only control.

Size

Two sizes — Small and Large. Large is the default for forms and settings; Small is reserved for dense layouts (data tables, filter chips). The hit area stays ≥ 44×44 px in both sizes — the label’s clickable region extends the hit zone past the box itself.

Platform considerations

Section titled “Platform considerations”

Desktop

Default Large size. Inside forms, align checkboxes with field labels on the leading edge. For lists, leave at least 8 px between checkbox and label for comfortable scanning at desktop reading distance.

Tablet

Same rules as desktop. Touch-input mode kicks in occasionally — make sure the label’s clickable area extends to the full row so a tap anywhere on the line toggles the box.

Mobile

Default Large size, full-row tap target. Stack vertically; never put checkboxes side-by-side at narrow widths. Keep helper / error text close to the box so the relationship is obvious without spatial cues.

Best practices

Section titled “Best practices”

A checkbox is the user’s most low-stakes commitment. Make the option clear, and make undoing the choice just as easy as making it.

Do

Use a native <input type="checkbox"> (never recreate with <div> or <span>). Always wire a visible <label> with for/id. Make Selected, Unselected, and Disabled states visually distinct beyond colour alone. Show a focus ring on keyboard focus — the global focus token, not a checkbox-specific one.

Don't

Don’t use a checkbox when only one option can be selected (that’s a radio). Don’t use one when the toggle applies immediately (that’s a switch). Don’t rely on colour alone to signal state. Don’t suppress the focus outline unless replacing it with something equally accessible.

Content guidelines

Section titled “Content guidelines”

Label each checkbox in the affirmative — “Send me product updates” not “Don’t send me product updates”. Lead with the most relevant word so the option is scannable when the form is long. Use sentence case (“Save my address”) rather than title case. For confirmation checkboxes (“I agree to…”), keep the linked policy or terms inline so the user knows what they’re agreeing to without leaving the screen.