Interactive Chip Badge Filter

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="chip-grp">
  <label class="chip-item">
    <input type="checkbox" checked />
    <span class="chip-label">React</span>
  </label>
  <label class="chip-item">
    <input type="checkbox" />
    <span class="chip-label">Vue</span>
  </label>
</div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.chip-grp { display: flex; gap: 8px; font-family: system-ui, sans-serif; }
.chip-item input { display: none; }
.chip-label {
  display: inline-block; padding: 6px 14px; background: #18181b; color: #a1a1aa;
  border: 1px solid #27272a; border-radius: 20px; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease;
}
.chip-item input:checked + .chip-label {
  background: #3b82f6; color: #ffffff; border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}