Radio

Choose exactly one option from a small, visible set. Radio is a native radio input; RadioGroup supplies the shared name, the selected value and arrow-key navigation.

StableSource

FreeTeamBusiness

<RadioGroup aria-label="Plan" defaultValue="team">
<Radio value="free">Free</Radio>
<Radio value="team">Team</Radio>
<Radio value="business">Business</Radio>
</RadioGroup>

Import

tsx

import { Radio, RadioGroup } from "@merid/react";

Examples

Controlled, with descriptions

defaultValue makes the group uncontrolled. For controlled use pass value and onValueChange, which receives the new value as a string. description adds a linked second line.

Standard3–5 business daysExpressNext business day

value: standard

const [value, setValue] = useState("standard");

<RadioGroup aria-label="Shipping" value={value} onValueChange={setValue}>
<Radio value="standard" description="3–5 business days">Standard</Radio>
<Radio value="express" description="Next business day">Express</Radio>
</RadioGroup>

Horizontal

MonthlyYearly

<RadioGroup aria-label="Billing period" orientation="horizontal" defaultValue="monthly">
<Radio value="monthly">Monthly</Radio>
<Radio value="yearly">Yearly</Radio>
</RadioGroup>

Disabled and invalid

disabled on the group disables every radio; on a single Radio it disables just that option, which arrow keys then skip. invalid marks the group with aria-invalid and turns the circles red.

<RadioGroup aria-label="Disabled group" disabled defaultValue="a">…</RadioGroup>

<RadioGroup aria-label="Size" defaultValue="m">
<Radio value="s">Small</Radio>
<Radio value="m">Medium</Radio>
<Radio value="l" disabled>Large (sold out)</Radio>
</RadioGroup>

<RadioGroup aria-label="Invalid group" invalid required>
<Radio value="yes">Yes</Radio>
<Radio value="no">No</Radio>
</RadioGroup>

API reference

RadioGroup

Renders a div with role="radiogroup"; the ref and other div attributes are forwarded.

Prop	Type	Default	Description
`value`	`string`	–	Selected value (controlled).
`defaultValue`	`string`	–	Initially selected value (uncontrolled).
`onValueChange`	`(value: string) => void`	–	Called with the new value when the selection changes.
`name`	`string`	–	Form field name shared by every radio. Generated when omitted.
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Layout direction.
`disabled`	`boolean`	`false`	Disables every radio in the group. Inside a `Field`, inherited from it.
`required`	`boolean`	`false`	Marks the group required for form validation. Inside a `Field`, inherited from it.
`invalid`	`boolean`	`false`	Marks the group invalid (`aria-invalid`; `data-invalid` on the group and each input). Inside a `Field`, derived from its `error`.
`children`	`ReactNode`	–	Radio elements.

Radio

The ref and native input attributes go to the <input>; className and style go to the outer wrapper.

Prop	Type	Default	Description
`value`Required	`string`	–	Value submitted and reported to RadioGroup.onValueChange.
`children`	`ReactNode`	–	Visible label next to the circle.
`description`	`ReactNode`	–	Secondary line under the label, linked via aria-describedby.
`disabled`	`boolean`	–	Disables this radio. Defaults to the group's disabled.

Styling

Hook	Values
`.mrd-radio-group`	Group container; `data-orientation` = `vertical` · `horizontal`
`.mrd-radio`	Radio wrapper; `data-disabled` when disabled
`.mrd-radio__control`, `__input`, `__circle`	Native input and its drawn circle
`.mrd-radio__text`, `__label`, `__description`	Label column
`data-invalid`	On the group and each input; styles the circles as invalid

Radio has no component variables.

Accessibility

The group has role="radiogroup". Name it with aria-label or aria-labelledby pointing at a visible heading. Inside a Field, it is named by the Field label and picks up its description, error, required and disabled state.
The group is a single tab stop: Tab lands on the selected radio (or the first one when nothing is selected).
Arrow keys move focus and selection together and wrap at the ends; disabled radios are skipped. Left/Right are mirrored in right-to-left layouts.

Key	Action
`Tab`	Moves focus into the group, onto the selected radio.
`↓→`	Selects the next enabled radio, wrapping to the first.
`↑←`	Selects the previous enabled radio, wrapping to the last.
`Home`	Selects the first enabled radio.
`End`	Selects the last enabled radio.
`Space`	Selects the focused radio if it is not already selected.

Guidelines

Use radios for two to six options that people should compare side by side, with a sensible default selected.

Avoid

Use radios for long lists — use NativeSelect — or for a single yes/no, which is a checkbox.

SegmentedControl — compact single-select for view switches.
Checkbox — independent choices.
NativeSelect — many options.