- Unchecked radio button icons are 18px (1.125em) and #AAAAAA
- Label text is Open Sans Regular, 15px and #001733
- Padding between a list of radio buttons is 30px. Padding between the right edge of the radio button and the text is 10px
- Selected radio buttons 18px (1.125em) and #005ccc
- Disabled radio buttons 18px (1.125em) and #D0D0D0. The label is #666666
- 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.
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.
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.
2. Do Not Display a Single 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.
4. Selection Only
Radio buttons shouldn't be used to perform commands or to open other windows / modals. Use links or buttons as appropriate.
5. Ensure Adequate Click and Touch Area
Let users select an option by clicking on either the checkbox itself or its label
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
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
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.
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 defaultview article
Payment Page - Button Iterations January 2015
Heatmap on Page 11 proves that users click on the label for a radio buttonview 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.
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 107view 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