RadioButton
A selectable Button for single selection.
Design guidance
When and how to use this
Use a RadioButton to represent a selection that has an immediate effect on the state of other interface items, such as a filter menu. It also works well for tabs.
When to consider something else
If a user can select multiple options, use a CheckButton. For forms, alongside other form controls, generally a standard Radio is more appropriate.
React
RadioButton composes the Button component and
supports everything that Button does in addition to a selected state controlled
by the isChecked prop.
| Prop | Description |
|---|---|
isChecked | if true, the RadioButton will be checked. You'll need to pass onChange to update its value (since it is now controlled). |
isDisabled | if true, the RadioButton will be disabled. |
Group
Use a RadioButtonGroup to group a set of RadioButton components together
that represent a single piece of state. This allows you to get and set state as
a single value and disable the entire group via isDisabled.
Color Scheme
RadioButton supports color modes when using the next theme, but sometimes a
design calls for the colorScheme to override the mode. Pass light or dark
to set the color explicitly.
Variant
By default, RadioButton uses the tertiary Button variant. It also
supports primary and ghost.
Primary
Ghost
Minimal
Pass isMinimal for the minimal style of each variant which only ever renders a
single pixel border.