Tabs

Views of the same thing, one at a time (WAI-ARIA tabs)

Tabs

Arrow keys move between the tabs; Home and End jump to the ends.

7 items · $34.23

Show the code

<div class="w-100">
<div class="tabs" role="tablist" aria-label="Order" data-tabs>
<button type="button" class="tab on" role="tab" id="Order-t0" aria-controls="Order-p0" aria-selected="true">Items</button>
<button type="button" class="tab" role="tab" id="Order-t1" aria-controls="Order-p1" aria-selected="false">Payments</button>
<button type="button" class="tab" role="tab" id="Order-t2" aria-controls="Order-p2" aria-selected="false">History</button>
</div>
<div id="Order-p0" role="tabpanel" aria-labelledby="Order-t0">
<p class="pt-3">7 items · $34.23</p>
</div>
<div id="Order-p1" role="tabpanel" aria-labelledby="Order-t1" hidden>
<p class="pt-3">Cash · $34.23</p>
</div>
<div id="Order-p2" role="tabpanel" aria-labelledby="Order-t2" hidden>
<p class="pt-3">Rung up at 17:26 by Mia Novak</p>
</div>
</div>

Segmented

For two to four short choices.

Show the code

<div class="segmented" role="radiogroup" aria-label="Chart" data-radios>
<button type="button" role="radio" aria-checked="true">Sales</button>
<button type="button" role="radio" aria-checked="false">Profit</button>
</div>