---
title: Checkbox Field
navTitle: Checkbox Field
summaryParagraph: A checkbox field includes a checkable input and its label. Checkbox fields are used in checkbox groups that let people select zero or more options from a set.
tags: ["Checkbox", "Tick box", "Check item", "Option button", "Choice", "Selection"]
needToKnow:
- Lets a user choose to select or unselect a single item. When used in a Checkbox Group, a checkbox lets a user select zero or more items from a set, which are all visible at the same time.
demoStoryId: checkboxfield-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%253A609" 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%253A688" allowfullscreen></iframe>

## To keep in mind

*   Ensure both label and input are clickable to select the checkbox field. That is, use `label` tags that wrap the `input` element or use a `for` attribute.

## When to use

*   For a single opt-in choice: show one checkbox field.

## When not to use

*   For a few options: show two or more checkbox fields in a [Checkbox Group](/components/checkbox-group).
*   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](/components/radio)

## External Links

Here are some examples of other existing design systems:

- [Material: checkboxes](https://material.io/design/components/selection-controls.html#checkboxes)
- [Material: form fields](https://material.io/develop/web/components/input-controls/form-fields/)