Radio

Mutually-exclusive square radio. Standalone or inside a RadioGroup wiring up name, value, onValueChange.

Add to your project

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/andromeda-radio

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
name	`string`	-	Shared group name for the radios' native inputs; auto-generated when omitted.
value	`string`	-	Selected value in controlled mode; the matching radio is checked.
defaultValue	`string`	-	Initially selected value when uncontrolled.
onValueChange	`(next: string) => void`	-	Handler called with the newly selected value.
disabled	`boolean`	false	Disables every radio in the group.
children	`React.ReactNode`	-	Radio elements belonging to the group.
className	`string`	-	Extra classes for the group wrapper.
style	`React.CSSProperties`	-	Inline styles merged onto the group wrapper.

Prop	Type	Default	Description
value	`string`	-	Required when used inside RadioGroup.
checked	`boolean`	-	Standalone controlled state.
defaultChecked	`boolean`	false	Initial checked state when uncontrolled and standalone.
onCheckedChange	`(next: boolean) => void`	-	Handler called with the new checked state when toggled.
label	`string`	-	Text label rendered beside the box.
disabled	`boolean`	-	Disables the radio and blocks interaction.
className	`string`	-	Extra classes merged onto the visual box.
style	`React.CSSProperties`	-	Inline styles merged onto the wrapper.
id	`string`	-	Id for the input; links the label via htmlFor, auto-generated when omitted.
name	`string`	-	Native input name that groups radios; falls back to the group's name.