Radio Group

Pick exactly one option. Free, MIT · Forms and input › Checkboxes and sliders

Native radios inside a radiogroup; arrow keys move the selection as in any browser radio group.

Installation

npx valyro-cli@latest add radio-group

npx shadcn@latest add https://valyro.xyz/r/radio-group.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { RadioGroup } from 'valyro-ui';

Prop	Type	Default
`options`	`RadioGroupOption[]`		Radios in order, each with a label and an optional description. Or compose them as children: `RadioGroup.Item`.
`children`	`ReactNode`		The compound form instead of `options`: `RadioGroup.Item` elements.
`value`	`string`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`string`		Initial `value` when uncontrolled.
`onValueChange`	`(value: string) => void`		Called with the new `value` when it changes.
`name`	`string`		Name of the native radios (generated when omitted).
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Stack options in a column or lay them out in a row.
`variant`	`'default' \| 'cards'`	`'default'`	`cards` renders each option as a selectable bordered card.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Radio and text size.
`disabled`	`boolean`	`false`	Disables every option.
`invalid`	`boolean`	`false`	Error color on the radios and aria-invalid on the group.
`required`	`boolean`		Marks the group aria-required and makes a choice mandatory for native form validation.
`animation`	`'default' \| 'spring'`	`'default'`	`spring`: the chosen dot pops in with a bounce and the ring pulses. `default`: the theme's transition.
`label`	`ReactNode`		Visible name above the options, linked to the group. Outside a FormField a group needs a name (this, or an `aria-label` / `aria-labelledby`), or a screen reader reads the options with no question.

RadioGroup.Item (RadioGroupItem)