RadioGroup

RadioGroup renders a complete, labelled set of Radio controls from options. Choose it when one decision needs shared field treatment; use standalone Radio for custom composition, or Select when the known list is better collapsed.

Examples

One visible choice

defaultValue seeds an uncontrolled selection, while each option can add a short hint where the label alone is not enough to make the trade-off clear.

Contact preference

EmailWritten updates and receiptsPhoneDo not contact me

Choose the best way to reach you.

A compact row

Set direction="row" only when the labels stay short and comparable. The options still share one native name, so the browser preserves mutual exclusion and arrow-key navigation.

Billing cycle

MonthlyYearly

When to use

Use RadioGroup for one choice from a short, visible list that benefits from a shared label, help text or validation message.

Reach for something else when:

The controls need custom composition or placement — use standalone Radio and give every item the same name.
The list is better collapsed or is too long to scan — use Select for a known list, or Combobox when people need filtering.
More than one choice can be true — use CheckboxGroup rather than forcing a single answer.

Accessibility

Renders a div with role="radiogroup"; when label is present, its generated label id is added to aria-labelledby alongside any id you provide.
Its composed controls are native radio inputs with one shared name (generated when name is omitted). Native arrow keys move through the group and selecting one clears the others.
hint and error are visible messages below the options. error replaces hint; neither is programmatically connected to the radiogroup by this component.
A controlled value stays owned by the caller. Update it in onChange after the component reports the newly selected string.

API and code

Name	Type	Required	Description
`label`	`ReactNode`	—	Label rendered above the group.
`hint`	`ReactNode`	—	Helper text rendered below the group when no error is present.
`error`	`ReactNode`	—	Error message rendered below the group in place of `hint`.
`options`	`RadioGroupOption[]`	—	Radio options rendered by the group. Default: `[]`.
`value`	`string`	—	Selected value in controlled mode.
`defaultValue`	`string`	—	Initially selected value in uncontrolled mode.
`onChange`	`(value: string) => void`	—	Called with the selected option value.
`name`	`string`	—	Shared native name for the radio controls. Generated automatically when omitted.
`direction`	`'column' \| 'row'`	—	Layout direction for the options. Default: `"column"`.

Without React, use a radiogroup wrapper, a shared native name and the same field classes:

html

<div class="lyra-field" role="radiogroup" aria-labelledby="contact-preference">
  <span class="lyra-label" id="contact-preference">Contact preference</span>
  <div class="lyra-choicegroup">
    <label class="lyra-check-row">
      <input class="lyra-radio" type="radio" name="contact" value="email" checked />
      <span>Email</span>
    </label>
    <label class="lyra-check-row">
      <input class="lyra-radio" type="radio" name="contact" value="phone" />
      <span>Phone</span>
    </label>
  </div>
  <span class="lyra-hint">Choose the best way to reach you.</span>
</div>

<lyra:radio-group> Generated from lyra-ds/blade v0.10.0.

Prop	Default	Required	Example values
`label`	`null`	—	—
`hint`	`null`	—	`Choose one`
`error`	`null`	—	`Required`
`options`	`[]`	—	—
`value`	`null`	—	—
`defaultValue`	`null`	—	—
`name`	`null`	—	—
`direction`	`'column'`	—	`row`

blade

<lyra:radio-group
    name="plan"
    label="Plan"
    hint="You can switch plans at any time."
    :options="[
        ['value' => 'starter', 'label' => 'Starter', 'hint' => 'Up to 3 projects'],
        ['value' => 'pro', 'label' => 'Pro', 'hint' => 'Unlimited projects'],
        ['value' => 'enterprise', 'label' => 'Enterprise', 'disabled' => true],
    ]"
    default-value="pro"
/>