Radio button

Also known as

Radio, Radio group

RadioButton and RadioButtonGroup represent a set of mutually exclusive but related options. The user can only select one radio button at a time. When a user selects a new option, the previously selected option automatically clears. Therefore, radio buttons should therefore be used to display a choice between two or more options, as it’s impossible to clear a single radio button after selecting it.

Density
Mode

Radio button groups allow users to select one or more values from a given set of choices. You can align them horizontally or vertically.

When direction="vertical"

  • Keep text short and as concise as possible in the horizontal orientation.
  • Do not truncate text descriptions as this can hide important content relevant to the user’s workflow. Consider shortening or rewording the label if space is limited.
  • The radio button icon should always be placed left aligned to the text.
  • We recommend that you always use a text description for a radio button.