RadioGroup

<RadioGroup legend="Plan" hint="You can change this later.">
<Radio name="plan" value="free" label="Free" checked />
<Radio name="plan" value="pro" label="Pro" />
<Radio name="plan" value="team" label="Team" />
</RadioGroup>

For options that need a description, an icon or a price, see Choice card.

Add

npx @ava-ui/apogee add radio-group

Depends on utils. Use with radio.

Usage

---
import RadioGroup from '@/components/apogee/RadioGroup/RadioGroup.astro'
import Radio from '@/components/apogee/Radio/Radio.astro'
---
<RadioGroup legend="Size" direction="row">
  <Radio name="plan" value="s" label="S" />
  <Radio name="plan" value="m" label="M" />
  <Radio name="plan" value="l" label="L" />
</RadioGroup>

Anatomy

A <fieldset> with a <legend>, the controls in the default slot, and an optional hint or error paragraph the fieldset is described by.

API

@composable. Any other native <fieldset> attribute (disabled, form) passes through.

Variants

<RadioGroup legend="Column">…</RadioGroup>
<RadioGroup legend="Row" direction="row">…</RadioGroup>

States

<RadioGroup legend="With hint" hint="Helper text.">…</RadioGroup>
<RadioGroup legend="With error" error="Pick at least one.">…</RadioGroup>
<RadioGroup legend="Disabled" disabled>…</RadioGroup>

Error tint

The group’s error tints every control inside it; the children need no hasError of their own.

<RadioGroup legend="Channels" error="Pick at least one">
<Radio label="Email" name="tint" value="a" />
<Radio label="SMS" name="tint" value="b" />
</RadioGroup>

Examples

A plan picker with a hint under each option:

<RadioGroup legend="Plan">
<Radio name="plan" value="free" label="Free" hint="One project, community support." checked />
<Radio name="plan" value="pro" label="Pro · €12/mo" hint="Unlimited projects, email support." />
<Radio name="plan" value="team" label="Team · €30/mo" hint="Shared billing and roles." />
</RadioGroup>

Accessibility

• Native <fieldset>/<legend>: screen readers announce the legend with each control.
• role="radiogroup" on the fieldset; arrow keys move between radios natively.
• Hint and error are linked through aria-describedby; the error has role="alert".
• Pass hasError to the controls that are wrong so they draw the critical border too.

Tokens

Do / Don’t

• Do write the legend as the question or category (“Plan”, “Notify me about”).
• Do use direction="row" for two or three short options only.
• Don’t nest one group inside another.

Content

• Legend in sentence case, no trailing colon.
• Error text says what to do (“Pick at least one”), not what went wrong.