'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Forms
Radio
One choice from a short list, as rows or as cards.
Ant Design: Radio
import { RadioGroup, Radio } from '@alea/ui';
Examples
Radio group
One choice; arrows move and select.
Contrast standard
Cards
Each option as a tile, for plans and modes.
Plan
Horizontal
For two or three short options.
Theme
Props
RadioGroup props
One choice from a short list; arrow keys move between options.
| Prop | Type | Default | Description |
|---|---|---|---|
appearance | "default" | "cards" | 'default' | cards: each option as a bordered tile (good for plans or modes). |
description | ReactNode | - | Help text under the group. |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | - | Error text, shown when the group is invalid. |
label | ReactNode | - | The visible label for the group. |
orientation | "horizontal" | "vertical" | 'vertical' | vertical (default) or horizontal. |
Radio props
One option of a RadioGroup.
| Prop | Type | Default | Description |
|---|---|---|---|
description | ReactNode | - | Help text under the option label. |
Accessibility
- Arrow keys move and select within the group; Tab leaves it.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves to the selected option |
| Arrow keys | Move and select |
Do and don't
Do
- Pre-select the most common choice when it is safe.
Don't
- Don't use for more than seven options: use Select.