Design Pattern

Checkbox Group

A checkbox group is a form pattern for selecting multiple items at once. Unlike a standalone checkbox, you need to design the group-level question text, selection rules, and error display together.

Difficulty: Beginner Category: Forms

When to use / not use

Use it when

  • When users need to select multiple items at the same time
  • When you want users to compare options while choosing
  • When the number of options is modest and fits on screen

Don't use it when

  • When only one choice is allowed → use radio buttons
  • When there are many options → consider a different UI with filtering
  • When toggling on/off → a switch matches the semantics better

Anatomy

1 fieldset
2 legend (the group's question)
3 Each checkbox + label
4 Supplementary text / error
  1. fieldset — Groups related options into a single unit
  2. legend — States what the group as a whole is asking
  3. Each option — Make the entire label clickable to widen the hit area
  4. Description — Communicate "multiple selection allowed" and required rules at the group level

HTML Structure

Key points

  • Use fieldset and legend instead of a plain row of divs
  • Tie rules like "choose at least one" to the group as a whole
  • Each checkbox should have its own label
  • Required-field errors should be shown at the question level, not per option

CSS Implementation

Points the visuals should reinforce

  • Grouping — Use a border or background to show that this is one question
  • Hit area — Make the whole row easy to tap
  • Errors — Indicate them with both a border and text
  • Spacing — Tightly packed options invite mis-taps

Accessibility

WCAG 1.3.1 Info and Relationships

Structure the relationship between question and options with fieldset / legend.

WCAG 3.3.1 Error Identification

When required but empty, clearly indicate it as a group-level error.

WCAG 2.5.8 Target Size

Make each row's clickable area large enough to tap comfortably.

Keyboard operation

  • Use Tab to move to each checkbox
  • Use Space to toggle selection
  • It helps if the group description and any error can be understood as soon as the first item gains focus

Live Demo

Basic group

A standard multi-select pattern that groups a question with fieldset and legend.

PreviewFullscreen

Required selection and error display

A pattern that conveys selection rules and errors at the group level.

PreviewFullscreen

Card-style layout

A card-style variation with visible surfaces, useful for settings or channel-selection screens.

PreviewFullscreen

Common mistakes

Omitting legend

Both visually and to assistive technology, it becomes unclear what the multi-select is about.

Stating required rules only at the end

If the rule isn't visible before selecting, users waste effort.

Packing options too tightly

On mobile or with fine-motor limitations, mis-taps become common.