Forms

Radio

Radio is a native radio button for a single option inside a mutually exclusive group.

Value (Unselected/Selected) × State — 8 variants

betaReact AvailableFigma AvailableDocs Partial

Known open questions

Native radio inputs stay circular in every shape personality.

StarterPro

Billing cycle

MonthlyYearlyCustom

Shipping method

StandardExpress

Select a shipping method.

Single selection from a set of mutually exclusive options, all visible at once.

Radio = native input[type=radio] + inline label text.

unselected · selected · disabled · error

2–6 mutually exclusive options where seeing all choices simultaneously helps the decision.

More than ~6 options (use Select). Multiple selections allowed (use Checkbox).

All Radios in one group must share the same name attribute and be wrapped in a fieldset/legend or role="radiogroup".

Arrow keys move selection within a named group using native radio behavior.

Forgetting the shared group label/legend.

Value × State as variants. Label (text).

semantic/surface/defaultsemantic/border/defaultsemantic/action/primarysemantic/focus-ring

Prop	Type	Default	Description
label	string	—	Visible option label.
name	string	—	Shared group name — required for grouping.
value	string	—	Option value.
checked	boolean	—	Controlled selected state.
disabled	boolean	false	Native disabled state.

Copy React example

import { Radio } from "@/components/ui/Radio";

export function Example() {
  return <Radio name="plan" value="pro" label="Pro" defaultChecked />;
}