Ravox KitForms
Radio Group
A group of real radios, as a simple list or as cards with a title and description. Arrow-key navigation, native name and form submission come from the browser.
Settings
Toggles
Installation
The command creates components/ui/radio-group.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add radio-groupProps
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "list" | "card" | "list" | Dot + text, or a clickable block with title and description (RadioGroup). |
| orientation | "vertical" | "horizontal" | "vertical" | One below the other, or side by side wrapping onto new lines (RadioGroup). |
| legend | ReactNode | — | Title of the group, becomes the <legend> (RadioGroup). |
| value / onValueChange | string / (value: string) => void | — | Controlled mode (RadioGroup). |
| defaultValue | string | — | Checked at the start, uncontrolled mode (RadioGroup). |
| name / hint / error | string / ReactNode | — | Name of the radios (generated if missing) and the note below the group (RadioGroup). |
| value, title, description, trailing | string / ReactNode | — | Each option (RadioGroupItem). The other props go on the <input type="radio">: {...register("role")} works. |