Radio Group

A set of checkable buttons where only one can be selected at a time, with neumorphic styling.

Installation

$ npx shadcn@latest add "/r/radio.json"

Option 1

Option 2

The radio button is available in different sizes.

Small

Medium

Large

Use the disabled prop to disable the radio button.

Disabled Option

Prop	Type	Default	Description
value	`string`	-	The value of the radio button.
size	`"sm" \| "md" \| "lg"`	`"md"`	The size of the radio button.
disabled	`boolean`	`false`	Whether the radio button is disabled.
className	`string`	-	Additional CSS classes to apply to the radio button.

Prop	Type	Default	Description
defaultValue	`string`	-	The value of the radio button that should be checked by default.
value	`string`	-	The controlled value of the checked radio button.
onValueChange	`(value: string) => void`	-	Event handler called when the checked value changes.
className	`string`	-	Additional CSS classes to apply to the group.