Radio List @astryx-svelte/core v0.3.0 · RadioList
Usage
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.ts
Best practices
| 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. |
| Don't | Wrap a disabled RadioList in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead. |
Examples
Common configurations, variations, and states.RadioList — Horizontal Layout
Radio list with horizontal orientation for compact selections.
RadioList — Pricing Tier
Radio list with pricing info in end content for plan selection.
RadioList — With Descriptions
Radio list with descriptions on the group and each item.
RadioList — With Validation
Required radio list with an error message when nothing is selected.