@gospore/radio

Styled wrapper around <input type="radio"> that keeps the native input in the DOM for accessibility, while exposing a custom visual and label slot.

Additional attributes (name, aria-describedby, etc.) are forwarded to the native <input>.

Theming

The visual separates the outer control from its inner selection indicator. Override --radio-control-fill-* and --radio-indicator-fill-* for their default, hover, active, disabled, checked, light, and dark states. The original --radio-color-* and --radio-background-* names remain the compatibility source for existing overrides, but new themes should use the paint-specific names.

Accessibility

• Since the real <input type="radio"> stays in the DOM, everything works with native form semantics: use the same name on a group to link options.
• Focus ring aligns with design tokens and only appears when navigating via keyboard thanks to the what-input utility.

Skeletons

This package also exports RadioSkeleton for async loading states. Import the owning package CSS plus @gospore/skeleton/skeleton.css so the shared skeleton primitive styles and tokens are available. Skeletons are decorative by default; put aria-busy, role="status", or loading copy on the surrounding region when assistive technology needs an explicit loading announcement.