Removable Pill
Three filter chips with × buttons that actually remove the chip — pure CSS via :has(:checked) hiding the parent. The canonical filter pattern, working without a single line of JS.
Removable Pill the 1st of 20 designs in the 20 CSS Tags & Chips Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="ctc-rem">
<label class="ctc-rem-chip">
<input type="checkbox" hidden />
<span>React</span>
<span class="ctc-rem-x" aria-hidden="true">×</span>
</label>
<label class="ctc-rem-chip">
<input type="checkbox" hidden />
<span>TypeScript</span>
<span class="ctc-rem-x" aria-hidden="true">×</span>
</label>
<label class="ctc-rem-chip">
<input type="checkbox" hidden />
<span>Astro</span>
<span class="ctc-rem-x" aria-hidden="true">×</span>
</label>
</div> .ctc-rem {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ctc-rem-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px 6px 14px;
background: rgba(124, 108, 255, 0.14);
color: #c4b5fd;
border: 1px solid rgba(124, 108, 255, 0.3);
border-radius: 999px;
font:
600 12px/1 system-ui,
sans-serif;
cursor: pointer;
transition:
opacity 0.2s,
transform 0.2s;
}
.ctc-rem-chip:hover {
background: rgba(124, 108, 255, 0.22);
}
.ctc-rem-x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
font-size: 14px;
line-height: 1;
transition: background 0.15s;
}
.ctc-rem-chip:hover .ctc-rem-x {
background: rgba(255, 255, 255, 0.18);
}
.ctc-rem-chip:has(:checked) {
display: none;
}