A group of options where only one can be selected at a time. All options are visible at once, making it easy to compare choices. Use it when users need to pick one option from a small set.
tsimport {RadioList} from '@astryxdesign/core/RadioList'
| Guidance | Practices |
|---|---|
| Do | Keep the number of options small: typically 2 to 7 choices. |
| Do | Use clear, concise labels that differentiate each option at a glance. |
| Do | Pre-select a default option when there's a sensible default; don't leave the group empty unless the choice is optional. |
| Don't | Use when multiple selections are needed; use CheckboxList instead. |
| Don't | Use for long lists; use Selector for better discoverability. |
| Don't | Use horizontal layout with more than 4 options; it wraps awkwardly. |
Radio list with horizontal orientation for compact selections.
Radio list with pricing info in end content for plan selection.
Radio list with descriptions on the group and each item.
Required radio list with an error message when nothing is selected.