Segmented Control

Mutually-exclusive toggle group. One root class — segmented-control — on a <fieldset>.

Basic

View preference 
<fieldset class="segmented" role="group" aria-label="View">
  <legend class="sr">View preference</legend>
  <button type="button" aria-pressed="true">List</button>
  <button type="button" aria-pressed="false">Grid</button>
  <button type="button" aria-pressed="false">Map</button>
</fieldset>

With Icons

Layout 
<fieldset class="segmented" role="group" aria-label="Layout">
  <button type="button" aria-pressed="true">
    <span class="axicon render" data-name="List"></span> List
  </button>
  <button type="button" aria-pressed="false">
    <span class="axicon render" data-name="Grid"></span> Grid
  </button>
</fieldset>

Toggle JavaScript

document.querySelectorAll('.segmented button').forEach(btn => {
  btn.addEventListener('click', () => {
    btn.closest('.segmented')
       .querySelectorAll('button')
       .forEach(b => b.setAttribute('aria-pressed', 'false'));
    btn.setAttribute('aria-pressed', 'true');
  });
});

Accessibility

  • Use role="group" + aria-label on the <fieldset>
  • Toggle aria-pressed — never rely on visual styling alone for selection state
  • Keyboard: Tab focuses the group, arrow keys move between options

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Segmented Control component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.