Segmented control

One choice from a few, with a sliding thumb

Default

Code

<div class="segmented" role="group" aria-label="View" data-segmented="seg-1">
  <span class="seg-thumb" aria-hidden="true"></span>
  <button type="button" aria-pressed="false" data-value="Day">Day</button>
  <button type="button" aria-pressed="true" data-value="Week">Week</button>
  <button type="button" aria-pressed="false" data-value="Month">Month</button>
</div>

Full width

Code

<div class="segmented segmented-block" role="group" aria-label="Plan" data-segmented="seg-2">
  <span class="seg-thumb" aria-hidden="true"></span>
  <button type="button" aria-pressed="true" data-value="Monthly">Monthly</button>
  <button type="button" aria-pressed="false" data-value="Yearly">Yearly</button>
</div>