Radio Button

A radio button is an input control that allow users to select one mutually exclusive value from a list of two or more options.

Example

See the Pen Radio Buttons by SHC-FED (@SHC-FED) on CodePen.0

Design Specs

Radio button spec

  1. Unchecked radio button icons are 18px (1.125em) and #AAAAAA
  2. Label text is Open Sans Regular, 15px and #001733
  3. Padding between a list of radio buttons is 30px. Padding between the right edge of the radio button and the text is 10px
  4. Selected radio buttons 18px (1.125em) and #005ccc
  5. Disabled radio buttons 18px (1.125em) and #D0D0D0. The label is #666666
Not Shown:
  • Radio Button icons are from the Enterprise Font Icon Library
  • Field Labels are Open Sans Semibold, 15px and #001733
  • On rollover the radio buttons and label turns #005ccc and the label gets underlined


Note: Design specs are for reference only. Developers should implement patterns using the Enterprise Framework whenever possible - see the Example section on this page.

Production Examples

  • Sears
  • Kmart

Desktop/Tablet/Mobile

Desktop/Tablet/Mobile

When Do I Use This?

Radio buttons should be used when the user must select exactly one choice from a group of options. If you have a long list of options (5 or more including a default selection) and want a user to choose a single one, use a drop down list box. If you would like a user to be able to select more than one option, use checkboxes instead.

Usage Guidelines

1. Use for Single Selection

Use radio buttons when users may need to make only one mutually exclusive option from a list of 2 - 4 options.

Radio button group with four options.

Radio button group with more than four options.

Dropdown list with more than 4 options.

2. Do Not Display a Single Radio Button

One radio button is active while the other option is present, but disabled.

A single radio button option because a non-visible option is not available. If there is only one option, there should not be a radio button.

3. Have a Default Selection

Since the browser will automatically select the first radio button in a radio button group if none are selected by default (see research link below) it is best practice to either make the first selection the default selection or set another neutral option (e.g. "None of the above") to a default selection.

Radio button group list with a default neutral option.

Radio button group without a default neutral option.

4. Selection Only

Radio buttons shouldn't be used to perform commands or to open other windows / modals. Use links or buttons as appropriate.

Radio button that allows user to make a selection.

Radio button that opens a modal.

5. Ensure Adequate Click and Touch Area

Let users select an option by clicking on either the checkbox itself or its label

Radio button group with proper touch area highlighted.

Radio button with improper touch area highlighted.

6. Capitalization

Labels should generally follow capitalization rules for its content, typically Title Case or Sentence case. See copy guidelines. All lowercase and all uppercase are not allowed

Labels adhere to guidelines for their content

Labels are all sentences and should not be Title Case.

ADA Compliance

The size and touch area of radio buttons is based on considerations for users with visual and/or motion based limitations. A larger touch area ensures all users, regardless of ability, are able to make their proper and intended selection.

Radio buttons must be grouped properly for assistive technology such as screen readers to identify them correctly. On their own, radio button input labels do not provide enough context to allow a blind user to easily respond to the questions.

In terms of code considerations to ensure checkboxes are accessible, the WebAIM guidelines say: “The label element is used to associate a text label to a form control. This allows a screen reader to read the associated label text when the user navigates to the form control. Groupings of form controls, typically groups of related checkboxes and radio buttons, sometimes require a higher level description (such as "Shipping Method" for a group of shipping option radio buttons). This descriptive text can be associated to the group of form controls using fieldset and legend. The fieldset identifies the entire grouping and legend identifies the grouping's descriptive text. Using fieldset and legend ensures that the text description is read to screen reader users when the grouping is navigated to." Source: WebAim: Forms

Useful Links:

Rationale

Radio buttons follow a physical model for a button that if you push one, it unselects another, allowing only a single selection amongst multiple options. Radios can be preferred over drop down lists because all options are visible to a user; however it takes up more real estate.

SHC design rationale:
To maintain a visual balance cohesion with the text that corresponds to a checkbox, the size of the icon is set to 18px. The radio icons have been built into the Sears icon font library for easy implementation and to ease site load time. A radio button's touch target area and padding takes into consideration touch friendly heights and imprecise clicking by a user to allow for ease of use. The selected color is blue to match the site-wide "selected state" standard. The radio and checkbox styles use a stand-in element to replace the default browser element; the goal being a more modern, branded look.

Research

Checkbox vs Radio buttons

Make the label clickable. Avoid having a single radio button. Select a default value.

view article

W3.org Radio Button Guidelines

At all times, exactly one of the radio buttons in a set is checked. If none of the elements of a set of radio buttons specifies `CHECKED', then the user agent must check the first radio button of the set initially.

view article

Radio Buttons: Select One by Default or Leave All Unselected?

Select a single radio button by default

view article

Payment Page - Button Iterations January 2015

Heatmap on Page 11 proves that users click on the label for a radio button

view full study

Checkout Design: Payment Method Selection

"Radio buttons placed far apart cause great confusion among the test subjects – that is when they are not overlooked altogether. ....Proximity is key in making radio buttons user-friendly – the options must be placed next to one another so the user perceives them as a collection mutually exclusive of choices, and can view and compare all the options without scrolling around the page."

This directly relates to the Payment Page - Radios v. Selectors study.

view article

Selectors Research

Various UXR on Selectors page support the best practice that providing clear cues and displaying an unavailable selection is better than hiding it (out of stock and unavailable).

view article

Baymard Audit Sears Desktop

Takeaway: radios are a binary choice control element. Using the same target area to perform child selections is not recommended. The example cited should be clear separate targets. "The “radio buttons” (Product Details Page) for shipping vs store pickup reuse the same hit area to perform different actions, consider toggling visibility of options inline instead" page 107

view full study

Buy Box Competitive January 2016

This study on PDP confirms the same as Baymard above: "Ability to change pickup store - Options for alternate store pick-up locations should be made noticeable."

view full study

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.