Radio

Single-choice selection group. Use Radio.Group as a wrapper and nest Radio items inside.

Playground

Monthly billingYearly billingLifetime

direction

size

disabled

rounded

<Radio.Group
  value={value}
  onChange={setValue}
>
  <Radio value="monthly" label="Monthly billing" />
  <Radio value="yearly"  label="Yearly billing" />
  <Radio value="lifetime" label="Lifetime" />
</Radio.Group>

Basic

Monthly billingYearly billingLifetime

Horizontal

Use direction='horizontal' for a row layout.

SmallMediumLarge

Sizes

Small radio

Medium radio

Large radio

Disabled

Disable the whole group or individual options.

Option AOption B

Radio.Group API

Property	Type	Default	Description
`value`	`string \| number`	—	Controlled value
`defaultValue`	`string \| number`	—	Default value for uncontrolled usage
`onChange`	`(value: string \| number) => void`	—	Called when selection changes
`name`	`string`	auto-generated	HTML name attribute shared by all radios in the group
`disabled`	`boolean`	false	Disable all radios in the group
`direction`	`"horizontal" \| "vertical"`	"vertical"	Layout direction
`size`	`"sm" \| "md" \| "lg"`	"md"	Size preset

Radio API

Property	Type	Default	Description
`value`*	`string \| number`	—	Value for this radio option
`label`	`ReactNode`	—	Label text next to the radio
`disabled`	`boolean`	false	Disable this specific radio