UX Patterns Guide
UI + UX Selection And Choice standard

Checkbox group

Show native checkboxes in a labeled group with a select-all-that-apply hint, independent checked states, clickable labels, and group validation when a minimum or limit applies.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • Users can choose zero, one, or many options.
  • The set is short enough to scan and compare without search.

Avoid when

  • Only one option can be selected.
  • The option set is long, dynamic, or needs search.
  • The selected values need compact chip management or async loading.

Problem it prevents

Users need to choose zero, one, or several independent options from a short set that should remain visible while they decide.

Pattern anatomy

What a strong implementation has to make clear

User need

Choices are not mutually exclusive.

Pattern promise

Show native checkboxes in a labeled group with a select-all-that-apply hint, independent checked states, clickable labels, and group validation when a minimum or limit applies.

Required state

Unchecked option state.

Recovery path

Custom toggles without checkbox semantics.

Access contract

Use programmatic labels for every checkbox.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • Visible checkboxes with large hit areas, persistent labels, group legend, and aligned helper text.
  • Checked, unchecked, focus, disabled, and error states are visually distinct without relying only on color.
  • Clicking the label toggles the checkbox.
  • Users can select multiple independent choices and review the selected set before submit.
Weak implementation

Vague, hidden, hard to recover from

  • Tiny custom boxes that are hard to target.
  • Checkboxes scattered without a group label or consistent spacing.
  • Using checkboxes for mutually exclusive choices.
  • Losing checked values after validation or page refresh.
UI guidance
  • Render visible native checkboxes with labels, checked states, group legend, select-all-that-apply hint, and group validation state.
  • Keep all short-list independent options visible for comparison and review.
UX guidance
  • Let users choose independent options and review the selected set before submitting.
  • Communicate minimum, maximum, required, or select-all-that-apply rules before errors occur.
Implementation contract

What the implementation must handle

States

  • Unchecked option state.
  • One or more checked option states.
  • Focused checkbox state.
  • Group validation state when required, limited, or left empty.

Interaction

  • Each option toggles independently without unchecking other selected options.
  • The selected set remains visible in the list and in any summary text.
  • Validation explains required, minimum, or maximum selection rules without clearing checked values.

Accessibility

  • Use programmatic labels for every checkbox.
  • Group related checkboxes with a fieldset and legend or equivalent.
  • Associate group hints and errors through descriptions when available.
  • Tab moves between checkboxes.

Review

  • Are these choices truly independent, and should users see them all together?
  • Can the user tell how many options may be selected before they submit?
Interactive lab

Inspect the states before you copy the pattern

Select multiple options

Toggle independent choices and confirm the selected set is visible.

Checkbox group
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Unchecked option state.

Keyboard / Access

Tab moves between checkboxes.

Avoid Generating

Using checkboxes for mutually exclusive choices.
Evidence trail

Source-backed claims behind this guidance

GOV.UK Design System Checkboxes component

Government Digital Service - checked

GOV.UK checkbox guidance supports one-or-more selections, fieldset/legend grouping, select-all-that-apply hints, errors, and independent checked values.

U.S. Web Design System Checkbox component

U.S. Web Design System - checked

USWDS checkbox guidance supports multiple answers, selectable labels, vertical lists, positive labels, touch spacing, and fieldset/legend grouping.

WAI-ARIA APG Checkbox Pattern

W3C Web Accessibility Initiative - checked

APG checkbox guidance documents checked, unchecked, and mixed states, accessible labels, grouped descriptions, and Space-key toggling.

Full agent/debug reference

Problem Context

  • Choices are not mutually exclusive.
  • Users need to review all available options and the selected set before submitting.

Selection Rules

  • Choose checkboxes for short independent multi-choice sets where every option can remain visible.
  • State any minimum, maximum, or select-all-that-apply rule before users submit.
  • Use radio groups instead when exactly one option is allowed.
  • Use multi-select when the option set is too long, searchable, or dynamic to show as a visible checklist.

Required States

  • Unchecked option state.
  • One or more checked option states.
  • Focused checkbox state.
  • Group validation state when required, limited, or left empty.

Interaction Contract

  • Each option toggles independently without unchecking other selected options.
  • The selected set remains visible in the list and in any summary text.
  • Validation explains required, minimum, or maximum selection rules without clearing checked values.

Implementation Checklist

  • Use native checkbox inputs where possible.
  • Group related choices under a clear fieldset legend or equivalent accessible name.
  • Add a short hint such as select all that apply when the multi-choice rule may be missed.
  • Preserve selections during validation errors.
  • Avoid hidden defaults, ambiguous negative labels, and custom toggles without checkbox semantics.

Common Generated-UI Mistakes

  • Using checkboxes for mutually exclusive choices.
  • Hiding selected values after choice.
  • Not explaining max-selection limits until submit.
  • Scattering related checkboxes without a shared question or legend.

Critique Questions

  • Are these choices truly independent, and should users see them all together?
  • Can the user tell how many options may be selected before they submit?
Accessibility
  • Use programmatic labels for every checkbox.
  • Group related checkboxes with a fieldset and legend or equivalent.
  • Associate group hints and errors through descriptions when available.
Keyboard Behavior
  • Tab moves between checkboxes.
  • Space toggles the focused checkbox without changing other checked options.
Variants
  • Stacked checkbox group
  • Checklist
  • Tile checkbox group
  • Checkboxes with conditional reveal

Verification

Last verified: