Astryx Design System

Radio List@astryxdesign/core v0.0.15 · 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
import {RadioList} from '@astryxdesign/core/RadioList'

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.

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.