Radio buttons

Use radio buttons to indicate a set of mutually exclusive but related choices. Users can select one option in a group. Users tap a radio button to select or clear it.

Best practices

  • Use radio buttons for two or more choices when space is not an issue. If space is limited, 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 as soon as users select a radio button. For example, do not open a new screen when users select a radio button.
  • Group and order radio buttons logically. For example, group related options together or include the most common options first.
  • Avoid ordering radio buttons alphabetically. Alphabetical order is language-specific.
  • Use clear, concise labels. Verify that the label clearly describes what occurs when users select the radio button.
  • Place labels on the right side of radio buttons.
  • Use sentence case capitalization for the individual radio buttons in a group. Capitalize the first word and any other word that requires capitalization (such as a proper noun).
  • Do not use end punctuation.

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

comments powered by Disqus