Switch

A segmented control that swaps between views with zero JavaScript. Same-name type="radio" inputs drive the active segment via :checked, and :has() reveals the matching .casca-switch-view. Without :has() support the first view stays visible and the radios still work.

1,240
today
8,300
this week
31,000
this month
<div class="casca-switch">
  <div class="casca-switch-controls">
    <input class="casca-switch-input" type="radio" name="range" id="r1" value="1" checked>
    <label class="casca-switch-btn" for="r1">Day</label>
    <input class="casca-switch-input" type="radio" name="range" id="r2" value="2">
    <label class="casca-switch-btn" for="r2">Week</label>
    <input class="casca-switch-input" type="radio" name="range" id="r3" value="3">
    <label class="casca-switch-btn" for="r3">Month</label>
  </div>
  <div class="casca-switch-views">
    <div class="casca-switch-view" data-view="1">…</div>
    <div class="casca-switch-view" data-view="2">…</div>
    <div class="casca-switch-view" data-view="3">…</div>
  </div>
</div>

Tabs variant

Add data-variant="tabs" for an underlined tab strip instead of a filled pill. Tabs are not a separate primitive: they are the same switch with the same radio-driven view swap, only the control strip restyles.

$48.2k
overview
12 open
detail
9 events
history
<div class="casca-switch" data-variant="tabs">
  <div class="casca-switch-controls"> …same radios + labels… </div>
  <div class="casca-switch-views"> …same views… </div>
</div>