HPE
Design System
Foundation
Components
Templates
Extend
Components

RadioButtonGroup

When one option of a set of options can be specified, use the RadioButtonGroup component.

Figma
Complete
Grommet
In Progress
Open in Grommet Designer
Open in Figma
Open docs

Guidance

Best Practices

  • 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

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.

Variants

RadioButtonGroup is primarily used to select a single item from a list of two or more options.

Validation

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.

Required information.
To ensure your product is configured correctly, select a Power Regulation option to resolve this error.
Open docs

Disabled

Indicates that the RadioButtonGroup input exists but cannot be interacted with until a precondition is met.

Set the disabled state for the RadioButtonGroup input above.
Open docs

Related

Related content you may find useful when using RadioButtonGroup.

CheckBoxGroup
When the user needs to select one or more options from a set of options, use a CheckBoxGroup.
Select
Flexible input allowing users to choose from a list of options.
HPE Forms Preview
Forms
Common form use cases from application configuration to payment acceptance.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page