Components / forms

forms · @awesome-ds/react

RadioGroup

Single selection within a named group.

Rules: rule.a11y.wcag-aa

State matrix

selectedrequired
unselectedrequired

Anatomy

  • fieldset
  • legend
  • radio options

Keyboard contract

Arrow keys move selection within the group; Tab enters and leaves the group.

Screen-reader contract

Legend names the radiogroup and each option exposes checked state.

Content rules

  • Options must be mutually exclusive.
  • Use concise parallel labels.

Public API

PropTyperequiredDescription
legendstringrequiredGroup question
namestringrequiredNative radio group name
optionsRadioOption[]requiredAvailable answers
valuestring—Controlled selected value
onChange(value: string) => void—Selection callback

Adaptation contracts

RTL
Keep label, input, hint, and error aligned to inline-start without changing DOM order.
High contrast
Use system field borders, focus indicators, and non-color invalid cues.
Reduced motion
Change validation and selection states without sliding or spring motion.

Verification IDs

RadioGroup/single-selection

Live

Live

Size

Copyable example

import { RadioGroup } from "@awesome-ds/react";

<RadioGroup legend="Plan" name="plan" options={[{value:'free',label:'Free'}]} />