Radio Group
Radio Group
A Radix RadioGroup.Root + RadioGroup.Item pair — single selection among a set of options.
import { RadioGroup, RadioGroupItem } from "@pompeitech/vesuvius-ui";Default
Disabled
Disable the whole group, or a single item within it:
Horizontal layout
RadioGroup's own layout is just grid gap-3 (vertical) — override it with className for a row:
API
RadioGroup
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | Controlled selected value. | |
defaultValue | string | Initial value, uncontrolled. | |
onValueChange | (value: string) => void | ||
disabled | boolean | false | Disables every item in the group. |
name | string | For plain (non-JS) form submission. | |
loop | boolean | true | Whether arrow-key navigation wraps from the last item back to the first. |
RadioGroupItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | Required — the value this item represents. | |
disabled | boolean | false | Disables just this one item. |
Accessibility
Arrow keys (↑/↓/←/→) move selection between items and select the newly-focused one immediately — matching native <input type="radio"> group behavior, not a list you arrow through and separately confirm. Only one item in the group is ever in the tab order at a time. Pair each item with a Label htmlFor (as in every example above) — same association rule as Checkbox.