Radio

Selects exactly one option from a small set that stays visible.

Alternate

Configurations

Supported configurations for this component.

Off On With description

States

Interaction states covered by the API and the style contract.

Hover Focus visible Disabled On hover Pressed Disabled on Disabled group

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/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

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

RadioGroup

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.

Radio

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.
description	`React.ReactNode`	-	Helper line under the label; the box aligns to the first line and the input is described by it.
size	`'md'\|'lg'`	'md'	Two rungs, 16 and 20px boxes, scaling the box, its mark and the label together, matching Checkbox at the same value. There is no 12px `sm` rung.
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.

More Andromeda Pro components

Alert

Displays a status message in the flow of the page, at a severity from note to fault.

4 variants

Avatar

Represents a person as a square image tile that falls back to their initials.

6 variants1 states

Badge

Displays the state a row or cell reports, such as online, queued, or fault.

8 variants

Remix Radio with AI

Premium

Written against the real source code. Works in Claude, Cursor, ChatGPT, or any AI tool you use.

This prompt is for remixing. Use it to build your own variation of Radio. Results depend on the model you use, and no prompt in the world is 100% exact.

Want the exact component?

One command installs it, pixel-perfect. Copy, paste into your project, done.

npx shadcn@latest add @aicanvas/••••••••••••

AI prompt for Radio

Build **Radio**: a square box with a small square mark, an optional label and an optional description. React + TypeScript, one file, named exports `Radio` and `RadioGroup`.

It is drawn to sit on a near-black ground, `oklch(0.135 0.002 286.2)`. The component never paints that ground itself. Typeface: Manrope, falling back to the system sans.

It is deliberately Checkbox's twin: at the same rung a radio and a checkbox are the same square. What differs is the mark, and the fact that radios belong to a group.

State
- every hook, handler, effect and disposal
- the animation loop, frame by frame

Tree
- the JSX, every className and inline style

Why · Remix · Check
- the mechanism, the tuning points, the checks

Unlock Radio

The full source and the remix prompt ship with Premium.

Get Premium