Filter chip

<label data-chip> wraps a checkbox in a pill. Several of them make a row of filters that toggle on and off, with no JavaScript behind it.

Basic

<fieldset>
  <legend>Show</legend>
  <p style="display:flex;flex-wrap:wrap;gap:.5rem">
    <label data-chip><input type="checkbox" checked> Pages</label>
    <label data-chip><input type="checkbox" checked> Posts</label>
    <label data-chip><input type="checkbox"> Drafts</label>
    <label data-chip><input type="checkbox"> Assets</label>
  </p>
</fieldset>

The checkbox is hidden behind the label and still carries the state, so the form submits as it always would.

Notes

• The chosen chip is found with :has(input:checked); there is no class and no script.
• A chosen chip fills with the page ink.
• The focus ring is drawn on the label, because the input it belongs to is invisible.
• Radios work too, for a group where only one chip can be on at a time.