---
title: Checkbox
description: Use the checkbox component to select one or more options of a limited number of choices.
keywords: ['form', 'control', 'selection', 'choices']
---

## Anatomy

![An image displaying a checkbox with a checkbox and label.](https://github.com/primer/brand/assets/912236/a3c10059-1c76-4d51-8e83-0be9a7b8588b)

- Checkbox: A selection control.
- Label: A description for the checkbox.

## Usage

Use checkboxes to allow users to select multiple items from a list of individual items, or to mark one individual item as selected. Unlike the [Radio](../Radio/index.md) component or [Select](../Select/index.md) component, Checkbox does not restrict users to choosing just a single option.

Checkbox labels should be descriptive and concise. Write labels in sentence case.

**✅ Do**

![](https://github.com/primer/brand/assets/912236/59d4b8da-1b59-418f-ae59-d2c6347376db)

_Checkbox labels should be descriptive and concise._

**❌ Don't**

![](https://github.com/primer/brand/assets/912236/15d2412e-0adf-4449-97c1-fa51f7d0c2a7)

_Don't make checkbox labels confusing, indirect, and avoid negative statements._

**✅ Do**

![](https://github.com/primer/brand/assets/912236/01763c28-bccf-4aad-8179-1669667b4be0)

_Use consistent styling (starting with capitalization and not ending with punctuation)._

**❌ Don't**

![](https://github.com/primer/brand/assets/912236/da0effd9-8111-44e6-a633-85f4baf2cb7a)

_Don't have inconsistent styling (not starting with capitalization or ending in punctuation)._

**✅ Do**

![](https://github.com/primer/brand/assets/912236/20a8d220-0875-49e6-a522-96192f51cc3b)

_Use first-person when asking users for acknowledgement or consent._

**❌ Don't**

![](https://github.com/primer/brand/assets/912236/8ee9b08c-0a3d-4ff4-a6fa-224632597461)

_Don't use third-person when asking users for acknowledgement or consent._

**✅ Do**

![](https://github.com/primer/brand/assets/912236/845c98ad-3c22-4ba1-8c14-5d978e39d51c)

_Create checkbox options that are non-exclusive and allow for multiple selections._

**❌ Don't**

![](https://github.com/primer/brand/assets/912236/9747bf90-8e45-45f0-9ff7-80e70effd1c8)

_Don't use checkbox options exclusive to one another. They should not be automatically deselected._

### States

Checkboxes have static dimensions and four different states: rest (default), checked, indeterminate, and disabled.

An indeterminate checkbox state should be used if the input value is neither true nor false. This can be useful in situations where you are required to display an incomplete state, or one that is dependent on other input selections to determine a value.

![](https://github.com/primer/brand/assets/912236/172e18b6-449e-4d3b-b3d0-a750df56fb77)

## Accessibility

Please use [FormControl](../FormControl/index.md) to display accessible checkboxes in the UI. This Checkbox component is intended only as an ingredient for other custom components, or as a drop-in replacement for native HTML checkboxes outside of form use-cases.

If you intend to use this component as part of another component, it should always be accompanied by a corresponding `<label>` to improve support for assistive technologies.

## Related components

- [Radio](../Radio/index.md): Use the radio component when a user needs to select one option from a list.
- [Select](../Select/index.md): Use the select component to enable selection of one option from a list.
- [FormControl](../FormControl/index.md): Use the form control component to display form inputs alongside labels, validation and more.
