RadioButtonGroup is a component that offers related options to a user, but only allows them to choose one.
- Keep labels concise and simple. Avoid lengthy descriptions, however err on clarity over brevity.
- If there are more than five options, or if the default value is expected most of the time, consider using Select instead to avoid cluttering the experience.
- Use when the user needs to see all related options.
- Radio buttons should always be listed vertically with one choice per line.
- Never add sub-categories to a RadioButtonGroup.
When to use
RadioButtonGroup is used to lay out a discreet list of mutually related options that are easily visible. RadioButtonGroup requires an input choice, so it is important to be clear with what is being asked of the user on the label.
When users should be able to select more than one option, use CheckBoxGroup instead.
RadioButtonGroup is primarily used to select a single item from a list of two or more options.
Validation styling indicates that a selection was not made. In many cases, a clear label for the group and an error message of 'required' may be sufficient. Bonus points go to messages explaining why a required selection is beneficial to the user.
Indicates that the RadioButtonGroup input exists but cannot be interacted with until a precondition is met.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.