One choice from a few: a list, inline, or cards in 1 to 3 columns.
RadioGroup renders real radio inputs in a fieldset. The cards variant suits two to four choices that need a sentence each (a billing period, a plan).
Installation
npx shadcn@latest add KezLahd/rime/radio-groupAlso installs: base, field.
Usage
import { RadioGroup } from "@/components/ui";
<RadioGroup aria-label="Billing period" value={period} onChange={setPeriod} options={[{ value: "monthly", label: "Monthly" }, { value: "yearly", label: "Yearly" }]} />Examples
Cards
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
RadioGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| optionsRequired | ReadonlyArray<RadioOption<V>> | ||
| valueRequired | V | null | ||
| onChangeRequired | (value: V) => void | ||
| name | string | Shared native name. Generated if omitted; arrow keys work across the group natively. | |
| variant | "list" | "inline" | "cards" | "list" | list = stacked radios. inline = radios in a row (Yes / No). cards = choice cards: title + description tiles (withdrawal source, delivery destination). |
| columns | 1 | 2 | 3 | 2 | cards only. Collapses to one column under 640px. |
| invalid | boolean | ||
| disabled | boolean | ||
| required | boolean | ||
| aria-label | string | ||
| aria-labelledby | string | ||
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --columns | 2 | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --brand | tokens.css | … |
| --brand-gradient | tokens.css | … |
| --danger-base | tokens.css | … |
| --danger-field-fill | tokens.css | … |
| --dur | tokens.css | … |
| --ease | tokens.css | … |
| --focus-ring | tokens.css | … |
| --glow-sm | tokens.css | … |
| --ink-body | tokens.css | … |
| --ink-disabled | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-muted | tokens.css | … |
| --line | tokens.css | … |
| --neutral-border | tokens.css | … |
| --r-lg | tokens.css | … |
| --rgb-brand | tokens.css | … |
| --rgb-brand-deep | tokens.css | … |
| --rgb-contact | tokens.css | … |
| --rgb-danger | tokens.css | … |
| --rgb-white | tokens.css | … |
| --surface-solid | tokens.css | … |
| --surface-sunken | tokens.css | … |
| --text-body | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-small | tokens.css | … |
Accessibility
- Arrow keys move the choice within the group, as native radios do.
- Radio dots stay round in every theme: a square radio reads as a checkbox.
Do and don't
Do
- Prefer RadioGroup over Select for 2 to 4 options.
Don't
- Don't preselect a choice the user must consciously make (accepting terms, a paid plan).
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open radio-group.md