<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 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 is represented by a circle. When it is selected, the selection is indicated by a smaller circle embedded within a larger circle along with a color change. The group label, sometimes called a legend or fieldset in code, gives the user context to make a selection. The individual selections have labels describing the user&#39;s options.</p>
<details data-name='image-block' data-images='[{"alt":"A diagram showing the anatomy of the radio button component.","caption":"The radio button component contains two parts:\n\n1. A radio button: the selection control\n2. Label: text describing the option","url":"https://dds.dell.com/site/stage/10/0a/Radio_Button_Anatomy_Single_453d4221f8.png"},{"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/production/19/4e/Radio_Button_Anatomy_Vertical_b5e52e2a51.png"}]' data-numberofcolumns='2'></details>

<h2>Articles</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'></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

This component is often used for questions with binary or opposite answers, such as yes or no, or true or false. This is the only time that radio buttons may be aligned horizontally (read [alignment guidance](/components/radio-button/?tab=Design#layout) for more information). The exception to this rule is settings with an on or off option in which toggle switches would be a better choice.

<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/stage/c9/cf/Radio_Button_Usage_Binary_Select_cbd671cc42.png"}]' data-numberofcolumns='1'></details>

### Default selection

Although one option in a radio button group may be selected by default, consider the experience from a user’s perspective. Selecting an option on a user’s behalf may come off as presumptive and risks alienating users by making assumptions about their preferences or motivations. Furthermore, users may not notice that a selection has already been made for them.\
\
\
Consider adding a ‘none of the above’ option to avoid forcing a selection. If it’s important that users are able to easily clear their selection, use [checkboxes](/components/checkbox/).

## Sizes

Radio button size should align to the experience or use case and should be determined by [breakpoints](/foundations/grid/#baseline-grid). Keep the size consistent across the page or experience.

<details data-name='image-block' data-images='[{"alt":"Large radio button example.","caption":"","url":"https://dds.dell.com/site/stage/42/49/Radio_Button_Sizes_Large_3d02a51b39.png"},{"alt":"Small radio button example.","caption":"","url":"https://dds.dell.com/site/stage/ec/6f/Radio_Button_Sizes_Small_552b97c947.png"}]' data-numberofcolumns='2'></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

Radio buttons require a minimum of two options. When listing more than five options, consider whether the [select](/components/select/) component provides a better experience for the user. Group labels—which are called ‘fieldset legend’ in code—are optional. However, if the individual option labels do not provide sufficient context, including a group label can clarify intent and help the user choose the appropriate option. This is particularly important when considering how people using assistive technology navigate through a site.

<details data-name='image-block' data-images='[{"alt":"An example of a radio button group.","caption":"A radio button group with a sample title, followed by three options, numbered 1, 2, and 3.","url":"https://dds.dell.com/site/stage/08/c6/Radio_Button_Grouping_22e5f760ee.png"}]' data-numberofcolumns='1'></details>

### Alignment

Radio buttons are left-aligned and typically vertically stacked when there are three or more options. Stacking radio buttons vertically makes them easier to scan and read, especially when the label text wraps to two lines.\
\
Radio buttons can align horizontally if there are two options with short labels, for example, yes or no. If aligning radio buttons horizontally, make sure there’s enough space between the options so it’s clear which label belongs to which 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/stage/a5/c1/Radio_Button_Alignment_Vertical_c586d3aa8d.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/stage/06/c2/Radio_Button_Alignment_Horizontal_4c29189629.png"}]' data-numberofcolumns='2'></details>

### Specifications

<details data-name='image-block' data-images='[{"alt":"Large radio button margins.","caption":"Large radio buttons have an 8-pixel margin above and below the component.","url":"https://dds.dell.com/site/stage/49/2b/Radio_Button_Large_Sizing_Spacing_Single_815d9692eb.png"},{"alt":"Large radio button group margins.","caption":"For large radio button groups, place a 24-pixel margin on the top and bottom between other page elements.","url":"https://dds.dell.com/site/production/cf/2f/Radio_Button_Large_Sizing_Spacing_Group_Vertical_761aed1044.png"},{"alt":"Large horizontal radio button group margins","caption":"For large horizontal radio button groups, place a 24-pixel margin on the top and bottom of the component, between other page elements.","url":"https://dds.dell.com/site/production/32/65/Radio_Button_Large_Sizing_Spacing_Group_Horizontal_bbc312c9bd.png"},{"alt":"Small radio button margins","caption":"Place an 8-pixel margin above and below small radio buttons.","url":"https://dds.dell.com/site/stage/ff/1e/Radio_Button_Small_Sizing_Spacing_Single_8f71b92dbd.png"},{"alt":"Small radio button group margins","caption":"For small radio button groups, place a 16-pixel margin on the top and bottom, when placing between other elements on the page.","url":"https://dds.dell.com/site/production/a2/3e/Radio_Button_Small_Sizing_Spacing_Group_Vertical_2cfcc1fef0.png"},{"alt":"Small horizontal radio button group margins","caption":"For small horizontal radio button groups, place a 16-pixel margin on the top and bottom of the component, between other page elements.","url":"https://dds.dell.com/site/production/5f/6c/Radio_Button_Small_Sizing_Spacing_Group_Horizontal_cbc39c9451.png"}]' data-numberofcolumns='3'></details>

## Interaction

### Behavior and states

The radio button or the label text can be selected.

<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/stage/2f/a3/Radio_Button_Behaviors_States_210109_V1_2_e67826a7e9.png"}]' data-numberofcolumns='1'></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

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

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

Code

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

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-radio-button--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-radio-button--basic)

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

Radio buttons require users to make one selection from a group of options. Because the user can select only one option, radio buttons are used to present mutually exclusive choices.

Radio Button

Radio button

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
