Radio Group Pattern

Comparison: Native vs. Focusgroup

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

• Both groups use arrow keys to navigate between options
• Both are single tab stops. Tab enters, arrows navigate, and Tab exits
• The focusgroup version can be styled with CSS without browser-default appearance
• Selection follows focus (on, default): Moving focus also selects the option, matching native radio behavior and the APG Radio Group pattern requirement. Selection follows focus (off): Arrow keys only move focus; press Enter or Space to select. This mode is shown for comparison only. It is non-conformant for role="radio".
• radiogroup has no default axis modifier. Unlike menu (which defaults to block wrap) or tablist (which defaults to inline wrap), you must explicitly add block or inline. block here sets the navigation axis to Up/Down. wrap matches native radio behavior, looping from last to first and first to last.
• The radiogroup token maps role="radiogroup" on the container and infers role="radio" on each generic child (including <span>).
• <span> is not natively focusable. Give every item tabindex="0" so the browser can focus it. focusgroup collapses those into one tab stop.
• JavaScript moves focusgroupstart to the selected item on each selection change. Combined with nomemory, Tab re-entry lands on the checked option.

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

Key Point: Navigation vs. Selection

With native <input type="radio">, moving focus with arrows also selects the option (selection-follows-focus). The APG Radio Group pattern normatively requires this behavior for role="radio". With focusgroup, selection-follows-focus is implemented in JavaScript and is on by default in this demo. The toggle above can disable it to show the non-conformant "deferred selection" mode (where Enter/Space confirms selection). It is provided for comparison only.