Checkbox Group

🧭 When to Use a Checkbox Group

Use a Checkbox Group when:

• Users can select multiple answers or preferences

• You want to present options as visual blocks, not just text

• You're building filters, forms, or multi-choice selectors

Avoid using a Checkbox Group when:

• Only one answer is allowed — use a Radio Group

• The form is long and selection doesn't benefit from styling — use simple checkboxes

🔲 Status

Checkbox Groups use status tokens consistent with your system:

• Default – No interaction

• Hover – Slight highlight or border glow to indicate interactivity

These states apply at the group item level, not just the individual checkboxes.

🎨 Types

Checkbox Groups support a wide range of layout and visual presentation styles:

• Horizontal Icon Check – Icons laid out side-by-side with a check overlay

• Horizontal Checkbox – Standard checkbox + label in a row

• Stack – Default stacked vertical layout

• Stack Badge – Label appears inside pill/badge-style containers

• Horizontal Avatar – Row of avatars with selectable state

• Stack Icon Check – Vertically stacked cards with an icon and a check indicator on select

Each type allows the same interaction logic and can be toggled via variants in Figma.

🎯 States

Each checkbox within the group has a binary visual state:

• Unselected – Not yet chosen; idle

• Selected – Active, visually indicated with a checkmark, color shift, or border

In avatar or badge styles, the selection often appears as an overlay icon or border ring.

🎨 Background Variants

Checkbox Groups can appear in different UI contexts:

• Default – For use on standard or light backgrounds

• Inverse – Optimized for dark themes or colored sections (e.g., over dark cards, modals, or hero content)

Tokens for text, border, and fill adjust based on background type for full contrast compliance.

🧩 Component Structure

Each group includes:

• Group label or heading (optional)

• A set of checkbox items with styling based on the selected type

• Optional subtext or descriptions for each item

• Auto layout logic for spacing, wrapping, and stacking across screen sizes

Each checkbox item can also include:

• An icon

• An avatar

• A badge or tag

• A description

• A selection indicator

Layer visibility is toggled via Figma component properties.

♿ Accessibility Considerations

From a design perspective:

• Ensure selected states are clear, even without color (use icons or bolding)

• Maintain enough spacing between options for easy tap/click

• Keep contrast compliant for inverse or image-based layouts

From a code perspective (if implemented):

• Wrap the group in a fieldset with a legend for labeling

• Use aria-checked, aria-labelledby, and role="group" where appropriate

• Support keyboard navigation and spacebar selection

✅ Best Practices

• Use horizontal icon or avatar layouts for compact visual filters (e.g., in dashboards)

• Use stacked badge or icon check for onboarding and form flows

• Limit group options to 5–7 visible items — use collapsible logic if more

• Add descriptions when necessary, but avoid overwhelming the layout

• Match background type to page theme — don’t use inverse on light UIs unless clearly separated