RadioGroup
Accessible radio group for single-option selection with semantic intents, keyboard navigation, and form integration.
01 Examples
With descriptions
Per-item disabled
Helper & error
02 Customization
Pricing Plan Selector
Selected: pro
Theme Selector
03 Accessibility
Native Semantics
Built on native <input type="radio"> elements inside a role="radiogroup" container for
correct form behavior and assistive technology support. The group label is linked via aria-labelledby, and error/helper text via aria-describedby.
Keyboard
Tab into the group focuses the selected (or first) item. Arrow keys move between options and select automatically. Vertical groups use Up/Down, horizontal groups use Left/Right. Navigation wraps around at both ends.
Focus Management
Uses roving tabindex: only the selected item (or the first item when nothing is selected)
is in the tab order. Disabled items are skipped during arrow key navigation. Focus rings
use focus-visible: via the peer pattern for keyboard-only visibility.
Reduced Motion
All Mint effects and transitions respect prefers-reduced-motion. The dot transition is
purely visual and does not affect interaction.
04 API Reference
No matching properties |