The native <input type="radio"> provides basic mutual exclusion within a named group, but it cannot be styled consistently, has no built-in group validation or error messaging, and requires manual <fieldset>/<legend> wiring. auro-radio and auro-radio-group address these gaps.

Native radio buttons have basic accessibility, but managing a group with a legend, validation errors, and consistent keyboard behavior requires careful manual implementation.

auro-radio provides:

• Proper ARIA semantics — Each radio carries role="radio", aria-checked, aria-required, and aria-disabled.
• Roving tabindex — Only the selected radio (or the first radio if none is selected) has tabindex="0". Arrow keys move between radios within the group, matching the expected WAI-ARIA radio group pattern.
• Group labeling — auro-radio-group provides a legend slot that is automatically associated as the group's accessible label.
• Keyboard interaction — Arrow keys navigate between options, Space selects the focused radio.

Building a radio group with coordinated validation, error display, and state management from native inputs requires custom JavaScript and DOM structure.

auro-radio-group provides:

• A single value property reflecting the selected radio's value
• optionSelected reference to the selected element
• Propagation of disabled state to all child radios
• Horizontal layout option via the horizontal attribute
• reset() to clear selection and validation state across all children

Native radio groups support required via the HTML attribute, but the error message is browser-controlled and there is no standard way to display custom error text below the group.

auro-radio-group integrates with the Auro form validation system:

• Group-level required validation (at least one must be selected)
• Custom error messages via setCustomValidityCustomError and setCustomValidityValueMissing
• noValidate to disable auto-validation on blur
• touched tracking so errors appear only after user interaction
• Dispatches auroFormElement-validated events for parent form coordination
• Error display via the helpText slot

Native radio buttons render differently across browsers and operating systems. Their appearance — the circle, the fill, the label spacing — cannot be reliably controlled with CSS alone.

auro-radio is built with the Auro Design System:

• Consistent visual language across all browsers and platforms
• Light and dark theme support (appearance="default" or appearance="inverse")
• CSS ::part() selectors for targeted styling (radio, radio-input, radio-label)