Primitives
RadioGroup
One choice from a small set, with arrow navigation
DailyEvery morning.
WeeklyEvery Monday.
NeverNo digest
Selected: weekly
Usage
import { RadioGroup } from "@gpuixui/primitives";
<RadioGroup
label="Digest cadence"
value={cadence}
onValueChange={setCadence}
options={[
{ value: "daily", label: "Daily" },
{ value: "weekly", label: "Weekly", description: "Every Monday." },
{ value: "never", label: "Never" },
]}
/>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
options | ReadonlyArray<RadioOption> | — | the choices as data ({ value, label, description? }); a description paints a caption beside the name and is announced as the row's help |
children | ReactNode | — | <RadioGroupItem> elements, for rich content |
value | string | — | controlled selection; the arrows and the single tab stop continue from the row that holds focus, so an owner that has not applied the choice yet cannot stall navigation |
defaultValue | string | "" | initial selection when uncontrolled |
onValueChange | (value: string) => void | none | the selected item's value |
onChange | (value: string) => void | none | deprecated alias for onValueChange |
orientation | "vertical" | "horizontal" | "vertical" | layout and the arrow axis; a name this release does not carry reads as "vertical" |
size | "sm" | "md" | "lg" | "md" | radio circle size |
accent | "primary" | "destructive" | "primary" | the dot's fill; a stored name the table does not carry reads as primary |
disabled | boolean | false | disables every option |
invalid | boolean | false | every empty circle's edge and every row's focus ring take the destructive role; a chosen radio keeps its accent fill |
label | string | none | accessible name for the group |
description | string | none | announced help for the group (aria-description) |
ref / aria-id / onLayout | host address | none | land on the row that holds the tab stop |
className | string | — | a Tailwind class string, joined after the recipe so it wins conflicts |
style | StateStyle<RadioGroupState> | — | resolved against the live state, merged last |
itemStyle | StateStyle<RadioItemState> | — | resolved per option row, merged last |
onClick / onKeyDown / onKeyUp / onFocus / onBlur | host handlers | none | composed with the group's own; yours runs first |
testId | string | — | stable locator for the group (the wrapper) |
itemTestId | (value: string) => string | — | per-row locator, derived from its value |
Keyboard
- Arrow UpArrow DownArrow LeftArrow Right
- moves focus along the group's orientation and selects
- HomeEnd
- the first or last option
- EnterSpace
- selects the focused option
A typed prefix selects the option it reaches, because selection follows focus.
read from RadioGroup.tsx
Edit this page on GitHubpackages/primitives/docs/radio-group.mdx