Radio

Choose one option from a related set.

Live example

A reviewed public example, isolated from this page.

import { Radio } from "heidi-ui";
import "heidi-ui/styles.css";

Copy this one primitive from its hosted source recipe or install the whole package from the Heidi UI overview.

indicator<span>
Visual radio ring; aria-hidden; filled center when data-state=checked (theme ::after).
Uses native semantics
item<button>
Focusable role=radio button with roving tabindex. Space and the arrow keys select; Enter is refused, as the APG radio table omits it and a native radio does not select on Enter. For compatibility, `id` identifies the sibling visually-hidden inert native input that owns form behavior and optional native labels; `visualId` explicitly identifies this visible host. Item owns aria-checked, invalid/label focus redirection, and state synchronization.
ARIA role: radio
root<div>
role=radiogroup; owns selection, arrow-key navigation, shared name/form/required/readOnly input semantics, and native reset reconciliation. A required group without an authored name receives one opaque, instance-stable native name so constraint validation remains effective; author name for a stable FormData key.
ARIA role: radiogroup