Radio Button

Status: Aetna CVS View in Android SDK Reference

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

Types

Default

Usage

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

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 an Exposed Dropdown Menu
Never use a single Radio Button as a toggle control, such as, “I agree to the Terms and Conditions”
Avoid pairing with other interactive elements, such as a tooltip or link

Visual Style

Always maintain 48dp 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.

Titles

Because Radio Button appears in sets, titles should be used to introduce the selections. Think of titles 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 checks/unchecks the Radio Button
  • Label clearly identifies purpose for Radio Button

Keyboard/Focus Expectations

  • Enabled Radio Buttons receive focus when tapped and with keyboard navigation
  • Tap or return/spacebar checks/unchecks the Radio Button

Screen Reader Expectations

Reading Order

  • Not checked/checked, “label”, “Radio Button group label”, Radio Button
  • If disabled: not checked/checked, “label”, “Radio Button group label”, Radio Button, disabled
↑ Back to top