| category | state | created | updated |
|---|---|---|---|
component design guidance |
approved |
2024-10-30 |
2024-10-30 |
A radio button is a form element that allows users to select one option from a group, ensuring clear choice among mutually exclusive options.```
- Radio buttons must be used when selecting only one item from a list is allowed.
- Radio buttons must not be left entirely unselected. By default, the first item or the most preferred item should be marked as selected.
- Radio buttons must be used when the list includes at least two mutually exclusive options.
- Radio buttons must not be used when more than six options are available. A select component should be considered instead.
- Radio buttons must not be used for functionality like “accepting terms of service” or similar. They should use a checkbox instead.
- Radio buttons should utilize clear radio button states (e.g., hover, focus, selected, disabled)to provide clear feedback on user interactions and enhance the overall user experience.
- 2024-10-30: Initial guidance