<h2>When to use</h2>
<p>Checkboxes and radio buttons are not used for the same purpose. Identifying the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities, or those using screen readers.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use cases</th>
</tr>
</thead>
<tbody><tr>
<td>Checkbox</td>
<td>If a user can select multiple options, use checkboxes. Checking one box does not uncheck others in the same list. A checkbox could also be used to confirm acceptance, as it allows a user to select and deselect the box before submission.</td>
</tr>
<tr>
<td><a href="/components/radio-button/">Radio button</a></td>
<td>If the question presents a binary option, or if the user must select only one option from a list of five or fewer, use radio buttons instead of checkboxes.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>Checkboxes may have a group label (fieldset/legend) and a checkbox label that corresponds to the checkbox itself, depending on which variant you choose. A checkbox can either be selected, unselected, or inactive. See <a href="/components/checkbox/?tab=Design#interaction">behaviors and states</a> for the checkbox component.</p>
<details data-name='image-block' data-images='[{"alt":"A diagram showing the parts of the checkbox component.","caption":"The checkbox component is composed of two parts:\n\n1. A checkbox\n2. An option with a label","url":"https://dds.dell.com/site/stage/ce/c6/Checkbox_Anatomy_Horizontal_df22052e69.png"},{"alt":"Diagram of checkbox group anatomy.","caption":"A checkbox group can have up to four parts:\n\n1. A group label (called a legend or fieldset in code)\n2. A checkbox\n3. A text label\n4. An error message","url":"https://dds.dell.com/site/production/52/11/Checkbox_Anatomy_Vertical_fffcf75438.png"}]' data-numberofcolumns='2'></details>

<h2>Articles</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/","type":"External"},"title":"Checkboxes versus Radio Buttons","description":"Read the Nielsen Norman Group&#39;s guidance.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

### Multi-select options

Use checkboxes when offering multiple choices within a group or category.

<details data-name='image-block' data-images='[{"alt":"Example of a checkbox group.","caption":"The checkbox component is frequently used to allow a user to select multiple choices within a group.","url":"https://dds.dell.com/site/stage/06/8b/large_Checkbox_Usage_Multiple_Choices_166f938825.png"}]' data-numberofcolumns='1'></details>

### Application of settings

Checkboxes are commonly used for multiple choice settings or actions that may a require a user’s approval or consideration before submission or saving.

<details data-name='image-block' data-images='[{"alt":"Checkbox group for email settings.","caption":"The checkbox component is used to apply preferences by selecting or unselecting settings that require approval before taking effect.","url":"https://dds.dell.com/site/stage/51/ae/large_Checkbox_Usage_Application_Settings_ad2ca48ae2.png"}]' data-numberofcolumns='1'></details>

### Confirmation and acceptance

Standalone checkboxes are often used to confirm or accept actions or terms. Unlike radio buttons, a checkbox allows the user to select and unselect their option before confirmation. It also provides friction to make the user consider their choice before submission. For this use case, a [button](/components/button/) is often paired with the checkbox to submit or confirm the user’s selection or action.

<details data-name='image-block' data-images='[{"alt":"Terms and conditions checkbox.","caption":"The checkbox component is used to agree to terms because it allows a user to select and unselect the option before confirmation.","url":"https://dds.dell.com/site/stage/b5/ad/large_Checkbox_Usage_Confirmation_Acceptance_83039d9105.png"}]' data-numberofcolumns='1'></details>

### Grouping

To feature multiple options within a category, select the checkbox group. In a checkbox group, a group label (fieldset/legend) is typically required. If there are more than five items in a group, consider using the [select](/components/select/) component.

<details data-name='image-block' data-images='[{"alt":" A checkbox group aligned vertically.","caption":"Checkbox groups are typically aligned vertically to increase legibility.","url":"https://dds.dell.com/site/stage/99/7e/large_Checkbox_Grouping_cbfe33f84c.png"}]' data-numberofcolumns='1'></details>

## Kinds

Checkboxes have two variants: with labels and without.

<details data-name='image-block' data-images='[{"alt":"Checkbox with label","caption":"","url":"https://dds.dell.com/site/stage/c1/dd/Checkbox_Variants_Label_d615ef4ee2.png"},{"alt":"Checkbox without label","caption":"","url":"https://dds.dell.com/site/stage/f9/28/Checkbox_Variants_Without_Label_78709b0430.png"}]' data-numberofcolumns='2'></details>

| Kind          | Use case                                                                                                                                                                                                                                                                                                                   |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| With label    | Checkboxes should have labels in most instances. See how to craft labels in the [content guidelines section](/components/checkbox/?tab=Design#standards)                                                                                                                                                                   |
| Without label | A checkbox without a label is most often used in a data table, where its context or interaction is made clear, either by its placement, or by its relationship to other content within the same row or column. Even if the checkbox has no visible label, it will still require a hidden label for assistive technologies. |

## Sizes

Consider grid size, placement, and use case when choosing the size of a checkbox. Keep the size consistent across the page or experience. Small is the default. If using a large checkbox, select it in UI Kit options or select large class in code.

<details data-name='image-block' data-images='[{"alt":"Small checkbox","caption":"","url":"https://dds.dell.com/site/stage/bb/2a/Checkbox_Sizes_Small_94620f51e2.png"},{"alt":"Large checkbox","caption":"","url":"https://dds.dell.com/site/stage/37/af/Checkbox_Sizes_Large_50975e0d6c.png"}]' data-numberofcolumns='2'></details>

| Size  | Use case                                                                                                                        |
| ----- | ------------------------------------------------------------------------------------------------------------------------------- |
| Small | Default size is most often used when featuring a checkbox group, or multiple options within a form.                             |
| Large | Consider using for standalone checkboxes, like terms and conditions acceptance, or other singular options within an experience. |

## Layout

### Alignment

Align checkboxes vertically when possible to eliminate confusion around labeling and which option the user is selecting. Horizontal alignment is only recommended for two options or less for this reason. Similarly, if using longer labels, and the text wraps, vertical is the preferred alignment.

<details data-name='image-block' data-images='[{"alt":"Checkbox group with text wrapping.","caption":"Checkbox groups are aligned vertically if a checkbox label text wraps.","url":"https://dds.dell.com/site/stage/75/57/Checkbox_Alignment_Vertical_c9b828eea3.png"},{"alt":"Checkbox with horizontal alignment.","caption":" A checkbox group can align horizontally when there are two options with short labels.","url":"https://dds.dell.com/site/stage/11/9b/Checkbox_Alignment_Horizontal_769d095ed3.png"}]' data-numberofcolumns='2'></details>

### Specifications

These are the sizing and spacing specifications built into the component.

<details data-name='image-block' data-images='[{"alt":"Margins around small checkbox.","caption":"Place an 8-pixel margin above and below a small checkbox.","url":"https://dds.dell.com/site/stage/8b/42/Checkbox_Small_Sizing_Spacing_Single_62b5a8ad3e.png"},{"alt":"Margins around small checkbox group.","caption":"For small checkbox groups, place a 16-pixel margin on the top and bottom of the component when placing between other elements on the page.","url":"https://dds.dell.com/site/production/3d/4f/Checkbox_Small_Sizing_Spacing_Group_Vertical_73b5995ae1.png"},{"alt":"Margins around horizontal checkbox group.","caption":"For small horizontal checkbox groups, place a 16-pixel margin on the top and bottom of the component when placing between other elements on the page.","url":"https://dds.dell.com/site/production/d4/58/Checkbox_Small_Sizing_Spacing_Group_Horizontal_96adc939a1.png"}]' data-numberofcolumns='3'></details>

<details data-name='image-block' data-images='[{"alt":"Margins around large checkbox.","caption":" Place an 8-pixel margin above and below a large checkbox.","url":"https://dds.dell.com/site/stage/9d/87/Checkbox_Large_Sizing_Spacing_Single_9cf8c0e2d1.png"},{"alt":"Margins around large checkbox group.","caption":"For large checkbox groups, place a 24-pixel margin on the top and bottom of the component when placing between other elements on the page.","url":"https://dds.dell.com/site/production/94/ec/Checkbox_Large_Sizing_Spacing_Group_Vertical_a97290ca0d.png"},{"alt":"Margins around horizontal checkbox group.","caption":"For large horizontal checkbox groups, place a 24-pixel margin on the top and bottom of the component when placing between other elements on the page.","url":"https://dds.dell.com/site/production/14/28/Checkbox_Large_Sizing_Spacing_Group_Horizontal_1174633950.png"}]' data-numberofcolumns='3'></details>

## Interaction

### Behaviors and states

Checkboxes can be selected, unselected, or indeterminate by selecting the checkbox or its associated label.

<details data-name='image-block' data-images='[{"alt":"Five possible states for checkboxes when selected and unselected, including error states.","caption":"Checkboxes with labels in rest, hover, press, inactive, focus, and error states.","url":"https://dds.dell.com/site/stage/5e/b3/Checkbox_Behaviors_States_0dd95b8324.png"}]' data-numberofcolumns='1'></details>

## Standards

### Accessibility

**All checkboxes require a clear, concise, and unique label**
For checkbox variants without labels, such as those used within a table, a hidden label is still required for assistive technologies.
WCAG 2.2: 1.3.1 [Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships), 2.4.6 [Headings and Labels](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html)
<br></br>
**Avoid default selections**
Pre-selected choices are considered a deceptive practice for all users. Implement a default unselected state.
<br></br>
**All keyboard interactions and ARIA labels must meet accessibility criteria**
[WAI-ARIA Checkbox Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#checkbox)

### Content

**Capitalization**
Use title case for group labels and sentence case for all other labels.
<br></br>
**Character length**
Checkbox labels should be scannable, consistent, and concise. Standalone checkboxes (for example as part of terms and conditions) may have a sentence or more of text so that the user is informed about what they’re agreeing to. When checkboxes are used as a group of options, try to keep the labels short. While it’s technically feasible to create long labels, checkbox labels that wrap to a second line may provide a poor user experience.
<br></br>
**Labels**
The biggest usability issues for checkboxes come from labels that are vague, misleading, or describe options that are difficult for users to understand.
Use clear and concise labels so users can easily scan options. Make sure you present all choices, and that those choices don’t overlap. All checkbox labels should be consistent in length, tense, and meaning. For group labels, state the category of the grouping.
**Do:**

* Ages 1 to 10
* Ages 11 to 15
* Ages 16 to 20

**Don’t:**

* Ages 1 to 10
* Ages 10 to 16
* Ages 16 to 20

<br></br> 
**Organization**
Make sure checkbox options are organized in a logical and meaningful way. Keep in mind, that when listing items alphabetically, the order will change when text is localized.
<br></br>
**Punctuation**
Avoid punctuating checkbox labels. An exception is if the label is a complete sentence (for example, in terms and conditions).
<br></br>
**Specificity**
Be explicit about the results of a user’s selection.
<br></br>
**Terms and conditions**
When a checkbox is asking users to agree to terms or service, use the first person and punctuate the sentence. In most cases, a link or an explanation of the terms and conditions must be available in the context of acceptance of those terms.
**Example:** I agree to the terms and conditions.
<br></br>
**Tone**
Use a positive tone, signaling affirmation, instead of negation to avoid confusing users. Use imperative verbs when writing labels.
**Do:** Receive email promotions
**Don’t:** No, I do not want to receive email promotions.
<br></br>
**Ethics**
Do not pre-select or have a default item selected for your users.

Checkbox

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-checkbox--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-checkbox--basic&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/story/components-checkbox--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-checkbox--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-checkbox--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-checkbox--docs&viewMode=docs&websiteFrame=true'></details>

Checkboxes allow a user to select multiple options from a category. A checkbox can also be used to display a single option that may require additional acceptance or confirmation prior to submission.

React update

<p>The DDS React library now contains all components available in the Angular and Vanilla component libraries.</p>
