Filter

Toggle chips to show and hide list items, no JavaScript. Each chip is a checkbox; :has() on the .casca-filter container hides any [data-filter] item whose category checkbox is unchecked. Uncheck a chip below to drop its rows. A no-JS .casca-filter-count shows how many remain (CSS counters skip hidden items), and a .casca-filter-empty message appears when everything is filtered out.

Marketing Sales Product

Q3 campaign launched
Acme deal closed
Pricing A/B test
v2.1 shipped
Renewal: Globex
Roadmap published

Showing of 6 events.

No events match — re-check a category above.

<div class="casca-filter">
  <fieldset class="casca-toggles">
    <label class="casca-toggle">
      <span class="casca-toggle-box">
        <input type="checkbox" class="casca-filter-input" value="1" checked>
      </span>
      <span class="casca-toggle-label">
        <span class="casca-toggle-swatch" style="--_color: var(--casca-color-1)"></span>
        Marketing
      </span>
    </label>
    <!-- ... one per category ... -->
  </fieldset>
  <ul>
    <li data-filter="1">Q3 campaign launched</li>
    <li data-filter="2">Acme deal closed</li>
  </ul>
</div>