Form controls

Radio

A radio button. Bind the group prop to a single state value to link several radios together. Use RadioGroup for the grouped variant with a built-in legend.

Basic group

Free engine

$0 forever

+ Email

One paid plugin

All plugins

every plugin, at the deepest volume bracket

API

Prop	Type	Default	Description
`value` required	`string`	no default	The value this radio represents in its group.
`group`	`string`	no default	Bindable selected value of the surrounding group.
`label`	`string`	no default	Inline label text.
`description`	`string`	no default	A second line under the label.
`error`	`string`	no default	A message under the radio, tied to it for screen readers, which also mark it invalid.
`icon`	`Component`	no default	A Lucide icon drawn before the label.
`labelHidden`	`boolean`	`false`	Keeps the label for screen readers only, for a radio in a table cell whose column header names it.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	The size of the radio and its label.
`variant`	`'inline' \| 'card'`	`'inline'`	The card variant draws a bordered option whose whole surface is the target.
`hint`	`string`	no default	Subdued hint below the label.
`name`	`string`	no default	Native form name (must match across grouped radios).
`id`	`string`	no default	DOM id of the underlying input.
`disabled`	`boolean`	`false`	Disable the radio.
`required`	`boolean`	`false`	Mark as required for form validation.
`onchange`	`(value: string) => void`	no default	Fires when the user picks this radio.
`class`	`string`	no default	Extra classes, appended to the component's own.