<h2>What&#39;s new in v3</h2>
<ul>
<li><p><strong>Size</strong>: Adjusted from 19×18 with inside stroke to 16×16 px with outside stroke.</p>
</li>
<li><p><strong>Checkbox group</strong>: This is a usage pattern of the checkbox, not a standalone component.</p>
</li>
<li><p><strong>Spacing</strong>: The space between the checkbox and label has been updated from 4px to 8px.</p>
</li>
<li><p><strong>States</strong></p>
<ul>
<li>Active and hover: Visually indicated inside the checkbox.</li>
<li>Focus: Applied only around the checkbox, not the label.</li>
</ul>
</li>
<li><p><strong>Design tokens:</strong></p>
<p>Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</p>
</li>
</ul>
<h2>When to use</h2>
<p>Checkboxes let users select one or multiple options. They make it easy to turn settings on or off or choose several items at once.</p>
<p>Use the checkbox when:</p>
<ul>
<li>Users need to select one or multiple options.</li>
<li>A setting can be turned on or off.</li>
<li>You need a quick way for users to confirm something (like agreeing to terms).</li>
</ul>
<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/v3/components/checkbox/checkbox-anatomy-single.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/v3/components/checkbox/checkbox-anatomy-group.png"}]' data-numberofcolumns='2' data-hideWidget='false'></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' data-hideWidget='false'></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. 

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 component.

<details data-name='image-block' data-images='[{"alt":"Example of a checkbox group.","caption":"\nThe checkbox component is frequently used to allow a user to select multiple choices within a group.","url":"https://dds.dell.com/site/v3/components/checkbox/checkbox-usage-multi-select.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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/v3/components/checkbox/checkbox-usage-settings.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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/v3/components/checkbox/checkbox-usage-confirmation.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Kinds

Checkboxes have two variants: with labels and without.

<details data-name='image-block' data-images='[{"alt":"Checkbox with label","caption":"Checkbox with label","url":"https://dds.dell.com/site/v3/components/checkbox/checkbox-kinds-with-label.png"},{"alt":"Checkbox without label","caption":"Checkbox without label","url":"https://dds.dell.com/site/v3/components/checkbox/checkbox-kinds-without-label.png"}]' data-numberofcolumns='2' data-hideWidget='false'></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**: 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.

<details data-name='image-block' data-images='[{"alt":"Small checkbox","caption":"Small checkbox","url":"https://dds.dell.com/site/v3/components/checkbox/checkbox-sizes-small.png"},{"alt":"Large checkbox","caption":"Large checkbox","url":"https://dds.dell.com/site/v3/components/checkbox/checkbox-sizes-large.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Layout

### Alignment

Align checkboxes vertically whenever possible to avoid confusion about labeling and which option the user is selecting. Horizontal alignment is recommended only when there are two options or fewer for this reason. Similarly, when using longer labels that may wrap to multiple lines, vertical alignment is preferred.

<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/v3/components/checkbox/checkbox-layout-vertical.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/v3/components/checkbox/checkbox-layout-horizontal.png"}]' data-numberofcolumns='2' data-hideWidget='false'></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/v3/components/checkbox/checkbox-spacing-small-single-sm.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/v3/components/checkbox/checkbox-spacing-small-group-vertical-lg.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/v3/components/checkbox/checkbox-spacing-small-group-horizontal-lg.png"}]' data-numberofcolumns='3' data-hideWidget='false'></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/v3/components/checkbox/checkbox-spacing-large-single-sm.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/v3/components/checkbox/checkbox-spacing-large-group-vertical-2xl.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/v3/components/checkbox/checkbox-spacing-large-group-horizontal-2xl.png"}]' data-numberofcolumns='3' data-hideWidget='false'></details>

## Interaction

### Behaviors and states

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

Checkboxes can have its labels in rest, hover, press, inactive, focus, and error states.

<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/v3/components/checkbox/checkbox-interaction-states.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| Component           | Use case                                                                                                      |
| ------------------- | ------------------------------------------------------------------------------------------------------------- |
| Unselected          | Default state when the checkbox has not been chosen.                                                          |
| Unselected error    | Alerts the user that an unselected checkbox needs attention (for example, a required selection was not made). |
| Selected            | Indicates the user has actively chosen this option.                                                           |
| Selected error      | Signals that the selected option has an issue that must be corrected.                                         |
| Indeterminate       | Used when only some items in a group are selected, but not all.                                               |
| Indeterminate error | Indicates an issue within a partially selected group of options.                                              |

## 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

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                                    | Collection | CSS var                                              | Preview  |
| --------------------------------------- | ---------- | ---------------------------------------------------- | -------- |
| spacing/sm                              | Semantic   | `var(--dds-spacing-sm)`                              | \-       |
| checkbox/button-height/sm               | Internal   | `var(--dds-checkbox-button-height-sm)`               | \-       |
| checkbox/size/sm                        | Component  | `var(--dds-checkbox-size-sm)`                        | \-       |
| border/radius/xs                        | Semantic   | `var(--dds-border-radius-xs)`                        | \-       |
| border/width/xs                         | Semantic   | `var(--dds-border-width-xs)`                         | \-       |
| color/background/SURFACE/neutral        | Semantic   | `var(--dds-color-background-surface-neutral)`        | \#FFFFFF |
| color/border/NEUTRAL/base               | Semantic   | `var(--dds-color-border-neutral-base)`               | \#1D2C3B |
| color/text/primary                      | Semantic   | `var(--dds-color-text-primary)`                      | \#1D2C3B |
| checkbox/button-height/lg               | Internal   | `var(--dds-checkbox-button-height-lg)`               | \-       |
| checkbox/size/lg                        | Component  | `var(--dds-checkbox-size-lg)`                        | \-       |
| color/border/ERROR/base                 | Semantic   | `var(--dds-color-border-error-base)`                 | \#8C161F |
| color/text/ERROR/rest                   | Semantic   | `var(--dds-color-text-error-rest)`                   | \#BB2A33 |
| color/background/BRAND/base-rest        | Semantic   | `var(--dds-color-background-brand-base-rest)`        | \#0672CB |
| icon/size/xs                            | Component  | `var(--dds-icon-size-xs)`                            | \-       |
| icon/color/inverse                      | Component  | `var(--dds-icon-color-inverse)`                      | \#FFFFFF |
| color/background/ERROR/base-rest        | Semantic   | `var(--dds-color-background-error-base-rest)`        | \#D0353F |
| color/background/NEUTRAL/subtle-hover   | Semantic   | `var(--dds-color-background-neutral-subtle-hover)`   | \#C5D4E3 |
| color/background/ERROR/subtle-hover     | Semantic   | `var(--dds-color-background-error-subtle-hover)`     | \#FFC3C9 |
| color/text/ERROR/hover                  | Semantic   | `var(--dds-color-text-error-hover)`                  | \#8C161F |
| color/background/BRAND/base-hover       | Semantic   | `var(--dds-color-background-brand-base-hover)`       | \#0063B8 |
| color/background/ERROR/base-hover       | Semantic   | `var(--dds-color-background-error-base-hover)`       | \#BB2A33 |
| color/background/NEUTRAL/subtle-pressed | Semantic   | `var(--dds-color-background-neutral-subtle-pressed)` | \#A4B8CD |
| color/text/secondary                    | Semantic   | `var(--dds-color-text-secondary)`                    | \#293B4D |
| color/background/ERROR/subtle-pressed   | Semantic   | `var(--dds-color-background-error-subtle-pressed)`   | \#FF99A1 |
| color/text/ERROR/pressed                | Semantic   | `var(--dds-color-text-error-pressed)`                | \#590A0F |
| color/background/BRAND/base-pressed     | Semantic   | `var(--dds-color-background-brand-base-pressed)`     | \#00468B |
| color/background/SURFACE/inactive       | Semantic   | `var(--dds-color-background-surface-inactive)`       | \#E1E1E1 |
| color/border/INACTIVE/base              | Semantic   | `var(--dds-color-border-inactive-base)`              | \#7E7E7E |
| color/text/inactive                     | Semantic   | `var(--dds-color-text-inactive)`                     | \#B6B6B6 |
| icon/color/inactive                     | Component  | `var(--dds-icon-color-inactive)`                     | \#B6B6B6 |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-checkbox--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-checkbox--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-checkbox--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-checkbox--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-checkbox--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-checkbox--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></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.