RadioGroup

import { Radio, RadioGroup } from 'yarcl';

Plan

FreeProTeam

Value: pro

Billing

MonthlyYearly

Choose how often to pay.

<RadioGroup label="Plan" value={plan} onValueChange={setPlan} orientation="horizontal">
  <Radio value="free">Free</Radio>
  <Radio value="pro">Pro</Radio>
  <Radio value="team">Team</Radio>
</RadioGroup>

RadioGroup renders a <fieldset> with a <legend>, gives the radios a shared name, and tracks the selected value. Radios inside don’t need name or checked. Like Field, it takes description and error.

Native radio keyboard behavior applies: Tab moves into the group, arrow keys change the selection.

Props

RadioGroup

Prop	Type	Default	Description
children required	ReactNode		Radios, each with a value.
label required	ReactNode		Visible group label, rendered as the <legend>.
color	Colorconfig		Color of every radio, from the colors config.
defaultValue	string | null	null	Initially selected value when uncontrolled.
description	ReactNode		Helper text shown below the options.
error	ReactNode		Error message. Marks the options invalid and styles them with defaults.errorColor.
name	string		Form field name shared by the radios. Generated when omitted.
onValueChange	(value: string) => void		Called with the selected radio's value.
orientation	'horizontal' | 'vertical'	'vertical'	Lays the radios out in a row or a column.
size	Sizeconfig		Size of every radio, from the sizes config.
value	string | null		Controlled selected value.

Radio

Accepts every native <input> attribute except type, color and size.

Prop	Type	Default	Description
children	ReactNode		Label shown next to the radio.
color	Colorconfig	config.defaults.color	Color of the selected radio, from the colors config. Inherited from a RadioGroup.
size	Sizeconfig	config.defaults.size	Radio size, from the sizes config (uses the size's iconSize). Inherited from a RadioGroup.
value	string		Value reported to the RadioGroup and submitted with forms.