Focusgroup: Radio Group Pattern

Comparison: Native vs. Focusgroup

Side-by-side comparison showing that a focusgroup radio group can behave identically to native <input type="radio">.

Try it: Use ↓ ↑ to navigate in both groups. Toggle the switch on the right to match native radio behavior, where selection follows focus.

Native Radio Buttons

Favorite color Red
Green
Blue
Purple

Focusgroup Radio Group

Selection follows focus

Red Green Blue Purple

Both groups use arrow keys to navigate between options
Both are single tab stops — Tab enters, arrows navigate, Tab exits
The focusgroup version gives you full control over styling
Selection follows focus (off): Arrow keys only move focus; press Enter or Space to select. Selection follows focus (on): Moving focus also selects the option, matching native radio behavior.

View source

<div focusgroup="radiogroup" aria-label="Favorite
     color">
    <span class="radio-option checked" aria-checked="true" tabindex="0"
         focusgroupstart>Red</span>
    <span class="radio-option" aria-checked="false"
         tabindex="0">Green</span>
    <span class="radio-option" aria-checked="false"
         tabindex="0">Blue</span>
    <span class="radio-option" aria-checked="false"
         tabindex="0">Purple</span>
</div>

Key Point: Navigation ≠ Selection

With native <input type="radio">, moving focus with arrows also selects the option. With focusgroup, navigation and selection are decoupled by default. You can add selection-follows-focus behavior in JavaScript (toggle the switch above to see it), or require an explicit Enter/Space to confirm — giving you more flexibility.