Radio Group

A group of radio inputs that lets users select exactly one option from a set.

Keyboard interaction

Key	Action
`Tab`	Moves focus into the radio group. Focus lands on the checked item, or the first item if none is checked.
`Tab (again)`	Moves focus out of the radio group to the next focusable element.
`Arrow Up / Arrow Left`	Selects the previous radio option and moves focus to it.
`Arrow Down / Arrow Right`	Selects the next radio option and moves focus to it.
`Space`	Selects the focused radio option (if not already selected).

Attribute / Property	Value / Behaviour
`role="radiogroup"`	Group wrapper — Identifies the container as a radio group to assistive technologies.
`aria-labelledby`	Group wrapper — Points to the group label element.
`aria-describedby`	Group wrapper — Points to the description and/or message element when present.
`aria-required="true"`	Group wrapper — Indicates the group requires a selection.
`role="radio"`	Each input — Native radio inputs carry this role implicitly.
`aria-checked`	Each input — Set to "true" on the selected item, "false" on all others.

✓

1.4.3 Contrast (Minimum) — AAPass

Radio label text uses --diwa-text-primary; meets the 4.5:1 minimum contrast ratio against the component background in both themes.

✓

1.4.11 Non-text Contrast — AAPass

The radio input border (--diwa-border) and checked indicator (--diwa-accent) meet ≥ 3:1 contrast against adjacent surface colours.

✓

2.1.1 Keyboard — APass

Tab moves focus into the group. Arrow keys select between options. Space selects the focused option.

✓

2.4.7 Focus Visible — AAPass

A tokenized focus outline (var(--diwa-focus-ring-width) solid --diwa-border-focus) is shown on the focused radio input via :focus-visible.

✓

4.1.2 Name, Role, Value — APass

role="radiogroup", role="radio", aria-checked, aria-labelledby, and aria-required are all managed automatically by the component.

Reduced motion — all CSS transitions inside the shadow DOM respond to prefers-reduced-motion: reduce and are suppressed automatically.
Focus management — on Tab, focus lands on the checked radio item or on the first item if nothing is checked. Subsequent tab exits the group as a single tab stop. Arrow keys move between options without leaving the group.
Group label — always provide the label prop so the radiogroup has an accessible name and screen readers announce the group context before reading each option.