Focusgroup: Interactive Demos

What is focusgroup?

The focusgroup HTML attribute lets you add arrow-key navigation to groups of focusable elements — implementing the "roving tabindex" pattern natively without writing any JavaScript for focus management.

Composite widgets like toolbars, tablists, menus, radio groups, and listboxes typically need arrow-key navigation so they behave as a single tab stop. Traditionally, this required significant JS to manage focus with the "roving tabindex" pattern. With focusgroup, you simply add an attribute and the browser handles everything:

• Arrow-key navigation between focusable descendants
• Single tab stop — Tab enters the group, arrows navigate within, Tab exits
• Focus memory — remembers which element had focus when you return
• Wrapping — optional wrap-around at boundaries
• Axis locking — restrict to horizontal (inline) or vertical (block)
• Opt-out — exclude elements from the group with focusgroup="none"

Quick Demo: Try It Now

Click on the first button below, then use ← → arrow keys to navigate. Press Tab to exit.

• The entire toolbar is one tab stop
• Left/Right arrows move focus between buttons
• Focus wraps from the last button back to the first (and vice versa)
• No JavaScript was used for focus management

Explore the Demos

Each demo page showcases a specific UI pattern with interactive examples and source code.

Resources

• Scoped Focusgroup Explainer (Open UI)
• ARIA Authoring Practices Guide (APG)
• MicrosoftEdge/Demos on GitHub

Browser Support

The focusgroup attribute is an experimental feature. At the time of writing, you may need to enable experimental browser flags in Microsoft Edge or another Chromium-based browser:

1. Open about://flags in Microsoft Edge or another Chromium-based browser
2. Search for Experimental Web Platform features
3. Set the flag to Enabled
4. Restart the browser