Toggle

A binary slide switch (.casca-segment): a labelled knob that flips between two states with no JavaScript. Casca also uses it for progressive disclosure, where flipping it reveals or hides the optional (.casca-segment-extra) items in its scope while the base set stays put. It is built on a hidden checkbox plus a label[for] and subsequent siblings, so it needs no :has() and degrades to a plain working checkbox in old engines.

Basic on / off

Off On

<div class="casca-segment">
  <input type="checkbox" class="casca-segment-input" id="t1" checked>
  <label class="casca-segment-control" for="t1">
    <span class="casca-segment-label">Off</span>
    <span class="casca-segment-track" aria-hidden="true"></span>
    <span class="casca-segment-label">On</span>
  </label>
</div>

Progressive disclosure

Flip to "Detailed" to reveal the extra cards. The base card stays visible in both states. Mark each optional item .casca-segment-extra and put it in any later sibling of the input.

Summary Detailed

Revenue$48.2k

Costs$31.8k

Margin34%

<div class="casca-segment">
  <input type="checkbox" class="casca-segment-input" id="t2" checked>
  <label class="casca-segment-control" for="t2">
    <span class="casca-segment-label">Summary</span>
    <span class="casca-segment-track" aria-hidden="true"></span>
    <span class="casca-segment-label">Detailed</span>
  </label>
  <div class="casca-card-grid">
    <article class="casca-card">...</article>
    <article class="casca-card casca-segment-extra">...</article>
  </div>
</div>