Radio Button

Radio buttons represent a group of mutually exclusive choices, compared to checkboxes that allow users to make one or more selections from a group. In use cases where only one selection of a group is allowed, use the radio button component instead of the checkbox.

When to use

Used when only one selection of a group is allowed. (Just mandatory lists). You can select radio button individually and select other option instead, turning on radio button for new selected option and turning off for the last option selected.

When don't use

If a user can select multiple items in a set, checkboxes should be used instead of radio buttons.

Main elements

Header

  • A heading must accompany a set of checkboxes to provide further context or clarity
  • Must indicate the category of the grouping or describe what actions to take below and if the selection is mandatory.

Radio button labels

  • Always use clear and concise labels.
  • Regarding complementary options, be explicit about the additional cost and results in the total price that will follow if the radio button is selected.
  • Labels appear to the left of radio button inputs to facilitate the selection in the right side.
  • In cases in which need to show additional info about colors or textures, is possible include an indicative square with the color or texture before label to allow user identify it faster.

Overflow content

  • Radio button labels being fewer than three words.
  • If you are tight on space, consider rewording the label. Do not truncate checkbox label text with an ellipsis.
  • Long labels may wrap to a second line, and this is preferable to truncation.
  • Text should wrap below so the control and label are vertical centered.

Behaviors

States

The radio button input allows for a series of states: onoff & disabled.


Did this page help you?