Radio button
Radio button
Resources
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.
Examples
How to use
Accessibility
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.