---
title: Checkbox Group
navTitle: Checkbox Group
summaryParagraph: A checkbox group contains checkbox fields that let people select zero or more options from a set.
tags: ["Choice list", "Radio button", "Option button", "Choice", "Selection"]
needToKnow:
- Prefer vertical (stacked) checkboxes to easily scan and compare options.
- When choices are mutually exclusive, use a radio instead.
- For settings that are immediately applied, consider using a toggle switch instead.
demoStoryId: checkboxgroup-react--interactive-kaizen-site-demo

---

## Visuals

<iframe style="border: none;" width="744" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe3TyAOZKfLg9cA01Iy1Mgm%2FKaizen-Site-embed%3Fnode-id%3D1292%253A1039" allowfullscreen></iframe>

<iframe style="border: none;" width="744" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe3TyAOZKfLg9cA01Iy1Mgm%2FKaizen-Site-embed%3Fnode-id%3D1292%253A1087" allowfullscreen></iframe>

## To keep in mind

*   Show options in a sensible order, such as alphabetical, numeric.
*   Avoid long lists. Chunk long lists and group related options together.
*   The setting only applies when the user takes an action, such as clicking a save button. The rare exception is for filtering checkboxes, which apply instantly.
*   Use specific, clear, concrete labels.
*   Prefer vertical (stacked) checkbox fields to easily scan and compare options.
*   Offer a default option.
*   Avoid nesting.

## When to use

*   Single choice options
*   Shown side-by-side or stacked
*   Where there is space to show them all at once

## When not to use

*   Don’t use when there is more than 20 options.
*   When choices are mutually exclusive, use a [radio](/components/radio) instead.
*   For settings that are immediately applied, consider using a [toggle switch](/components/toggle-switch-field) instead.

## See also

- [Toggle switch](/components/toggle-switch-field)
- [Radio Group](/components/radio-group)

## External Links

Here are some examples of other existing design systems:

- [Material: form fields](https://material.io/develop/web/components/input-controls/form-fields/)
- [Polaris: choice list](https://polaris.shopify.com/components/forms/choice-list)