Forms
IRadioGroup
One choice from a handful of visible options. Past five or six, use an ISelect instead.
A string item is expanded to { label, value } with both the same.
Descriptions
An item can carry a description, shown under its label.
Up to three invoices a month.
Unlimited invoices and reminders.
Everything in Pro, plus shared clients.
Cards and tiles
variant changes the shape. card makes the whole bordered surface the control, which suits options that carry a description.
tile centres an icon above the label, for a short row of choices read at a glance. The icon comes from the item's icon.
Horizontal
orientation="horizontal" lays the options out in a row, and arrow-key navigation follows the orientation.
Sizes
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | (RadioGroupItemOption | string)[] | [] | Options to render |
variant | 'radio' | 'card' | 'tile' | 'radio' | Shape of each option |
size | 'sm' | 'md' | 'lg' | 'md' | Control scale |
invalid | boolean | — | Mark as failing validation. Taken from the enclosing IFormField when omitted |
unstyled | boolean | — | Drop built-in classes |
class | string | — | Merged with the built-in classes |
ui | { root?, item?, mark?, icon?, content?, label?, description? } | — | Per-element class overrides |
disabled, required, name, orientation and dir are forwarded to Reka UI's RadioGroupRoot, so the group posts in a plain <form>.
interface RadioGroupItemOption {
label: string
value: string
description?: string
icon?: IconLike
disabled?: boolean
}A radio group cannot be cleared once a choice is made. Include an explicit "None" or "Any" option when no answer is a valid answer.