UX

  • Use radio buttons for a single selection from a set of options
  • Do not use radio buttons for multiple selection from a set of options; that’s what checkboxes are for (for some reason we have to keep saying this)
  • Do not use a single radio button for a single selection (like “I agree to terms and conditions), that’s what a checkbox is for as it cannot be unchecked

Annotations for (most) radio buttons

  • Most of the time, your developers will be pulling from a code library with well defined radio buttons, so it’s not really necessary to annotate if it’s well documented

Annotations for iOS radio buttons

  • iOS has no native radio buttons, so your engineers will be hacking a button to act kinda like radio buttons

Working examples

Choose your favorite NATO letter
This is the best letter

Fully disabled radio inputs

Choose your favorite coffee chain

Annotations for specialized radio buttons

  • If you’re creating specialized radio buttons (like a star rating), just annotate as type=radio and define the names for each radio button Hidden label: "1 star"

Styled radio buttons as star rating

Rate this product

Related radio button entries