Checkmark filter chips
A small dot spins and turns into a tick when you switch an option on. Several chips can be active.
Settings
Code
<div class="uv-fck"><button class="on"><span class="ic"><i></i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>All</button><button><span class="ic"><i></i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Design</button><button><span class="ic"><i></i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Code</button><button><span class="ic"><i></i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Photos</button></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
Use these when people can combine options, like the amenities on a holiday rental site: wifi, pool, parking, pets allowed. The tick makes the difference between on and off obvious, which matters when four or five filters are active at once. Handy if you are looking for multi-select chips or checkbox chips in HTML and CSS.
Because they toggle, update the list or the result count right away, so people see each tap doing something. Avoid them for choices where only one answer makes sense, like sort order. There a segmented control is clearer.