Radio buttons

Use radio buttons to indicate a set of mutually exclusive but related choices.

Users can perform the following action with radio buttons:

User goal

Action using the navigation keys

Action using a touch screen

Action using a physical keyboard

Select a radio button.

Click the trackpad.

Tap the item.

Press the Space key.

This screen shows a radio button.

Best practice: Implementing radio buttons

  • Use radio buttons for two or more choices when space is not an issue. If space is an issue, consider using a drop-down list instead.
  • Verify that the content for radio buttons remains static. Content for radio buttons should not change depending on the context.
  • Do not start an action when users select a radio button. For example, do not open a new screen.
  • Align radio buttons vertically.
  • Group and order values logically (for example, group related radio buttons together or include the most common values first). Avoid ordering radio buttons alphabetically; alphabetical order is language-specific.

Guidelines for labels

  • Use clear, concise labels. Verify that the label clearly describes what occurs when users select the radio button. If the labels are too long, they wrap.
  • Place labels on the right side of radio buttons.
  • Use sentence case capitalization.
  • Do not use end punctuation.

Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus