Radio Group
Exactly one of several.
Default
Three choices. Tab in, then use the arrows.
Tab enters the group once and the arrow keys move inside it — which is what the keyboard expects of radios, and the reason they are not a row of separate buttons. Every item needs a label of its own.
Installation
npx philcn@latest add radio-groupThe file is written into your project. It is yours from then on — change it as you like.
Props
| Prop | Type | What it does |
|---|---|---|
| RadioGroup.value | string | Controlled: the chosen value. |
| RadioGroup.defaultValue | string | Uncontrolled: what is chosen at the start. |
| RadioGroup.onValueChange | ((value: string) => void) | Called with the new value on every choice. |
| RadioGroup.orientation | "horizontal" | "vertical" | Which arrow keys move through the group. Horizontal for a row, vertical for a column. |
| RadioGroup.loop | boolean | Whether the last item wraps round to the first. |
| RadioGroupItem.value * | string | What this choice stands for. Required. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.