Radio Group

A set of checkable buttons where only one option can be selected at a time, built on Radix UI's RadioGroup primitive.

Install

npx shadcn@latest add https://atomx.acau.net/r/radio-group.json

Use RadioGroup when the user must pick exactly one option from a small, visible set (typically 2–5). For longer lists or when collapsing the options behind a trigger is preferable, use Select instead. For multi-select, use Checkbox.

Wrap each option in a RadioGroupItem with a unique value and pair it with a Label via htmlFor.

Preview

Default with a preselected value

Economy

Standard

Express

Disabled option

Credit card

PayPal

Wire transfer (unavailable)

Props

`RadioGroup`

Extends React.ComponentProps<typeof RadioGroupPrimitive.Root>. All Radix RadioGroup props are forwarded.

Prop	Type	Notes
`value`	`string`	Controlled value of the selected radio item.
`defaultValue`	`string`	Initial value for uncontrolled usage.
`onValueChange`	`(value: string) => void`	Fired when the user selects a different item.
`disabled`	`boolean`	Disables all radio items in the group.
`name`	`string`	Name attribute on the underlying form inputs.
`required`	`boolean`	Marks the group as required for form submission.

`RadioGroupItem`

Extends React.ComponentProps<typeof RadioGroupPrimitive.Item>.

Prop	Type	Notes
`value`	`string`	The value this item represents. Required.
`disabled`	`boolean`	Disables this item only.