Radio Button

Status: Aetna CVS View in iOS SDK Reference

A common input control for users to select only one option from a number of choices.

Types

Basic

Table Cell

Usage

Use for forms where users can choose a single item from a group of options.

Use in a table for common form layouts
Radio Button groups should always have a Section Title that clearly defines or explains what the grouped options are for
Use for a small set of choices
Avoid using Radio Buttons for items that have many choices. If available options can be collapsed, consider using a Select
Never use a single Radio Button as a toggle control, such as, “Agree to Terms and Conditions”
Avoid pairing with other interactive elements, such as a tooltip or link

Visual Style

Always maintain 44pt minimum hit area for each option

Content Strategy

The overall content goal of Radio Button is to present a set of selections with appropriate scope and style for the screen’s context.

Section Headers

Because Radio Button appears in sets, Section Headers should be used to introduce the selections. Think of Section Headers as a tone-setter for the content that follows.

Grammar & Punctuation

  • Selections should follow best practices for capitalization and punctuation. For example, more complex selections should be Sentence case, and only full sentences should receive end punctuation
  • Sets, simple and complex, should adhere to parallel syntax

Actions

  • Because Radio Button is inherently selectable, actions are not required to highlight that behavior
  • Instead, use actions to clearly define the selection’s intent. Distinct selections are especially important for Radio Button as users can select only a single option.

Character Count

Radio Button can accommodate multiple lines, but as with all selection-related content, short and sweet options make it easier for users.

Accessibility

Characteristics

  • One Radio Button can be checked per group
  • Tapping label or icon selects/unselects the Radio Button
  • Label clearly identifies purpose for Radio Button
  • Radio Buttons require a Section Header to act as a group label

Keyboard/Focus Expectations

  • Enabled and disabled Radio Buttons receive visible focus with VoiceOver
  • Tap selects/unselects the Radio Button

Screen Reader Expectations

  • Reading order: “unselected/selected, {Radio Button label}, {Radio Button group label}, button”
  • If disabled: “unselected/selected, {Radio Button label}, {Radio Button group label}, button, dimmed”
↑ Back to top