Form

Radio

Single native radio input. Use Radio Group for accessible keyboard-navigable groups.

Install

pnpm add @codefast/ui

Import path

@codefast/ui/radio

Examples

Standalone radios sharing a name; the selected value is echoed below.

Small

Medium

Large

Size: Medium

Lay standalone radios out in a row.

Yes

Maybe

Disable an individual choice while keeping it visible.

Standard — in stock

Overnight — sold out

How the parts compose. Copy this skeleton and fill in the slots.

import { Radio } from "@codefast/ui/radio";

<Radio
  name="size"
  value="md"
  checked={selected === "md"}
  onValueChange={setSelected}
/>

Props for each part of the component. All native element props are also forwarded.

A single native radio input. Use Radio Group for managed groups.

Prop	Type	Default	Description
checked / onValueChange	boolean / (value: string) => void	—	Controlled selected state; onValueChange fires with this radio’s value.
name	string	—	Radios sharing a name form one exclusive group.
value	string	—	The value submitted when this radio is chosen.

Built to be keyboard-navigable and screen-reader friendly out of the box.

Key	Function
`Tab`	Moves focus to the radio group.
`Arrow+Down`	Selects the next radio in the group.

Conventions that keep usage consistent across an app.

Don’t