<h2>What’s new in v3</h2>
<ul>
<li><strong>Sizes:</strong> Updated radio button sizes to 16 px and 20 px for consistency with the checkbox component.</li>
<li><strong>Grouping:</strong> Radio button group is now treated as a usage pattern, not a standalone component.</li>
<li><strong>States:</strong> Hover and active states are now shown inside the radio button instead of outside it.</li>
<li><strong>Focus:</strong> Focus is now applied only around the radio button. The spacing between the radio and the label has been increased from 4 px to 8 px to support this update.</li>
<li><strong>Design tokens:</strong> 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>.</li>
</ul>
<h2>When to use</h2>
<p>Use radio buttons when users must select one option from a set.</p>
<p>Use it to:</p>
<ul>
<li>Present mutually exclusive options where only one choice is allowed.</li>
<li>Show all available options at once so users can compare them easily.</li>
<li>Support decisions that require clear, immediate visibility of every option.</li>
</ul>
<p>Radio buttons and checkboxes 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 for those using assistive technology.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use cases</th>
</tr>
</thead>
<tbody><tr>
<td>Radio button</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>
<tr>
<td><a href="/components/checkbox/">Checkbox</a></td>
<td>If a user can select multiple options, use checkboxes. Checking one box does not uncheck others in the same list. A checkbox can also be used to confirm acceptance, as it allows a user to select and unselect the box before submission.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>A radio button appears as a circle. When the user chooses an option, a smaller filled circle and a color change indicate the choice. The group label provides context, and each option has a label that clearly describes the user&#39;s choices.</p>
<details data-name='image-block' data-images='[{"alt":"A diagram showing the anatomy of the radio button group.","caption":"A radio button group can have up to four parts:\n\n1. Group label: description of the group\n2. Radio button: selectable option\n3. Label: identifies option\n4. Error message: validation error information","url":"https://dds.dell.com/site/v3/components/radio-button/radio-button-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit the NN/g website","path":"https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/","type":"External"},"title":"Checkboxes vs. radio buttons","subtitle":"","description":"Read the Nielsen Norman Group&#39;s article on radio buttons.","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

Use radio buttons to require only one selectable option from a list. All options are visible, which allows users to scan and compare options to make an appropriate selection.

Radio buttons always have a minimum of two options. Limit the number of options to five or less for a better user experience. If listing more than five options, consider using the [select](/components/select/) component.

### Binary selection

Radio buttons work especially well for questions that present binary or opposite choices, such as yes or no, or true or false. This is one of the few cases where horizontal alignment is appropriate (read [alignment guidance](/components/radio-button/?tab=Design#layout) for more information).

If the choice represents an on or off setting, consider using the [switch](/components/switch) component.

<details data-name='image-block' data-images='[{"alt":"An example of a radio button group with binary choices.","caption":"The radio button component is frequently used to present a user with binary, mutually exclusive options.","url":"https://dds.dell.com/site/v3/components/radio-button/radio-button-usage-binary.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Grouped selections

Grouping radio buttons allows users to choose exactly one option from a defined set. This grouping is a usage pattern.

Add a group label to help clarify intent or provide context that individual option labels don’t cover.

<details data-name='image-block' data-images='[{"alt":"","caption":"\nGrouped radio buttons used to capture one selected option.","url":"https://dds.dell.com/site/v3/components/radio-button/radio-button-usage-grouped.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Default selection

Although a default option may be pre-selected, consider the user’s perspective. Setting a default may appear presumptive or lead users to overlook the fact that a choice has already been made.

If forcing a selection is not appropriate, consider adding a “none of the above” option. If users need to clear their choice, use [checkboxes](/components/checkbox/) instead.

## Sizes

Radio button size should match the experience and be based on screen sizes. Keep the same size across the page or flow.

Radio buttons have two sizes:

* Large: 20px. Use when you need more emphasis or at larger screens.
* Small: 16px. Use in most [lists](/components/list/) and [forms](/patterns/form/).

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

| Size  | Use case                                                                                                                                                                            |
| ----- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Small | Small radio buttons can be used in most [lists](/components/list/) and [forms](/patterns/form/).                                                                                    |
| Large | Large may be used to draw attention to options or to accommodate larger breakpoints. To implement a large radio button, select it in the UI kit and choose the large class in code. |

## Layout

### Alignment

Align and stack radio buttons vertically when you present three or more options. Vertical stacking improves scannability, especially when labels wrap to two lines.

You can lay out radio buttons horizontally when you present only two short options (for example, “Yes” and “No”). When you use a horizontal layout, leave enough space between options so each label clearly maps to its radio button.

<details data-name='image-block' data-images='[{"alt":"A radio button group with three options that is vertically-aligned.","caption":" Radio button groups are typically vertically-aligned to increase legibility.","url":"https://dds.dell.com/site/v3/components/radio-button/radio-button-layout-alignment-vertical.png"},{"alt":" A radio button group with two options that is aligned horizontally.","caption":"A radio button group can align horizontally when there are two options or less with short labels.","url":"https://dds.dell.com/site/v3/components/radio-button/radio-button-layout-alignment-horizontal.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

### Specifications

Apply these spacing rules to keep layouts consistent.

**Large radio buttons**

* **Component:** Use an 8‑pixel margin above and below the radio button, and between the radio button and its label.
* **Groups:** Use a 24‑pixel margin above and below the group when placing it between other page elements.

**Small radio buttons**

* **Component:** Use an 8‑pixel margin above and below the radio button, and between the radio button and its label.
* **Groups:** Use a 16‑pixel margin above and below the group when placing it between other page elements.

<details data-name='image-block' data-images='[{"alt":"Large radio buttons specifications","caption":"","url":"https://dds.dell.com/site/v3/components/radio-button/radio-button-layout-specification-large.png"},{"alt":"Small radio buttons specifications","caption":"Place an 8-pixel margin above and below small radio buttons.","url":"https://dds.dell.com/site/v3/components/radio-button/radio-button-layout-specification-small.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Interaction

### Behavior and states

Users can select an option by clicking the radio button or the label.

<details data-name='image-block' data-images='[{"alt":"The behaviors of radio button components","caption":" Diagram showing the five possible states for radio buttons.","url":"https://dds.dell.com/site/v3/components/radio-button/radio-button-behaviors-states.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| State    | Behavior                                                                                                                            |
| -------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Rest     | The rest state is the starting or ending state, indicating the option is selected or unselected.                                    |
| Hover    | When a user hovers over a selection, a highlight appears, indicating which item is selectable.                                      |
| Press    | The highlighted state of touching the screen or clicking a mouse over an item, indicating the item is in the act of being selected. |
| Inactive | Inactive radio buttons and labels are displayed with 40% opacity, indicating the option exists but is not available to the user.    |
| Focus    | A blue outline appears around the radio button and its label when a user tabs or uses keyboard controls to navigate selections.     |

## Standards

### Accessibility

**All radio buttons and radio button groups must have clear, concise, and unique labels**

Labels must also be programmatically associated with assistive technology users.

WCAG 2.2: [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html)
WCAG 2.2: [2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html)
<br></br> 
**Avoid default selections**

Preselected choices are considered a deceptive practice for all users. Implement a default unselected state with radio button groups.
<br></br>
**All keyboard interactions and ARIA labels must meet accessibility criteria**

[WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#radiobutton)

### Content

Because radio buttons require users to select only one choice, make sure that the options are clear and distinct. Like [checkboxes](/components/checkbox/), the biggest usability problems for radio buttons come from labels that are vague, misleading, or describe options that are difficult for users to understand. All labels should be consistent in length, tense, and meaning.
<br></br>
**Capitalization**

Use title case for group (legend) labels and sentence case for all other labels.
<br></br>
**Character length**

Radio button labels should be scannable, consistent, and concise.
<br></br>
**Describing options**

Make sure radio button 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>
**Labels**

Always use clear and concise labels for radio buttons so options are easily scannable by users. Make sure choices don’t overlap. For group labels, a best practice is to 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

\
**Punctuation**

Avoid punctuating radio button labels.
<br></br>\
**Specificity**

Be explicit about the results of a user’s selection or what they are enabling or disabling.
<br></br>\
**Tone**

Use a positive tone, signaling affirmation, instead of negation to avoid confusing users. Use imperative verbs when writing labels.

**Do:** Opt in for email promotions

**Don’t:** Opt out of email promotions

Design

## 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)`                            | -       |
| radio-button/size/sm                    | Component  | `var(--dds-radio-button-size-sm)`                  | -       |
| radio-button/button-height/sm           | Internal   | `var(--dds-radio-button-button-height-sm)`         | -       |
| border/radius/rounded                   | Semantic   | `var(--dds-border-radius-rounded)`                 | -       |
| border/width/xs                         | Semantic   | `var(--dds-border-width-xs)`                       | -       |
| color/background/SURFACE/neutral        | Semantic   | `var(--dds-color-background-surface-neutral)`      | #FFFFFF |
| color/border/NEUTRAL/subtle             | Semantic   | `var(--dds-color-border-neutral-subtle)`           | #5C6E7E |
| color/text/primary                      | Semantic   | `var(--dds-color-text-primary)`                    | #1D2C3B |
| radio-button/button-height/lg           | Internal   | `var(--dds-radio-button-button-height-lg)`         | -       |
| radio-button/size/lg                    | Component  | `var(--dds-radio-button-size-lg)`                  | -       |
| color/background/BRAND/base-rest        | Semantic   | `var(--dds-color-background-brand-base-rest)`      | #0672CB |
| radio-button/check/size                 | Component  | `var(--dds-radio-button-check-size)`               | -       |
| color/background/NEUTRAL/subtle-hover   | Semantic   | `var(--dds-color-background-neutral-subtle-hover)` | #C5D4E3 |
| color/background/BRAND/base-hover       | Semantic   | `var(--dds-color-background-brand-base-hover)`     | #0063B8 |
| color/background/NEUTRAL/subtle-pressed | Semantic   | `var(--dds-color-background-neutral-subtle-pressed)`| #A4B8CD |
| 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 |

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

Radio buttons require users to make one selection from a group of mutually exclusive options.

Radio Button