Skip to main content

Curbcut WCAG AAA

Toggle group

An exclusive choice presented as segmented buttons — radios underneath.

View
Show the markup 
<fieldset class="cc-fieldset" style="border:0;padding:0">
  <legend class="cc-label">View</legend>
  <div class="cc-toggle-group">
    <span class="cc-toggle-group__option">
      <input type="radio" name="ex-view" id="ex-view-list" checked>
      <label for="ex-view-list">List</label>
    </span>
    <span class="cc-toggle-group__option">
      <input type="radio" name="ex-view" id="ex-view-map">
      <label for="ex-view-map">Map</label>
    </span>
  </div>
</fieldset>

Accessibility

  • Real radio buttons in a fieldset — arrow keys, form submission and screen-reader grouping come free.
  • The focus ring draws inside the segment; selection is exposed as the radio's checked state, not just color.