Usage
- Use a radio group when you are trying to get a user to select only one option from a relatively short list of options.
- Use a radio group over a select when it is advantageous to have all possible options to be immediately visible to the user.
- Make the default the first choice if possible.
- If choices describe a range of impact to the browsing behavior, order them from the greatest impact to least impact. Do not force the default to the top if it breaks the sequence.
Design properties
See Storybook for code
| Property | Values | Default |
|---|---|---|
| State Variant | Default | Hover | Active | Focus | Disabled | Default |
| Checked Variant | Off | On | Off |
| Property | Values | Default |
|---|---|---|
| Icon InstanceSwap | ||
| Show slot Boolean | true | false | false |
| Slot InstanceSwap | ||
| Show icon Boolean | true | false | true |
| Disabled Variant | Off | On | Off |
| Show description Variant | Off | On | Off |
| Show support link Variant | Off | On | Off |
Types
With label
With label and description
With label and icon
With label and link
Writing guidelines
- Write in an active voice for radio button labels.
- Use sentence case.
- Give radio buttons meaningful descriptions. Each radio button’s descriptor should clearly describe the effect of choosing it.
- Maintain parallel construction for lists of related radio button labels.
- Use terminal punctuation after radio button labels.
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Aug 4, 2024 |
2.0.0 |
Simplified template |
|
Mar 01, 2024 |
1.0.0 |
Initial draft of radio guidance |