Ingredientes
Un toque para incluir, dos para excluir
Include or exclude filter chips
Each chip has three states: one tap includes it, a second excludes it and a third clears it.
Settings
Code
<div class="uv-fie"><p class="ti">Ingredients</p><div class="cs"><button type="button" data-s="off"><i aria-hidden="true"></i><span>Gluten</span></button><button type="button" data-s="in"><i aria-hidden="true"></i><span>Dairy</span></button><button type="button" data-s="out"><i aria-hidden="true"></i><span>Spicy</span></button><button type="button" data-s="off"><i aria-hidden="true"></i><span>Nuts</span></button><button type="button" data-s="off"><i aria-hidden="true"></i><span>Shellfish</span></button></div><p class="hn">Tap once to include, twice to exclude</p></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
See all FiltersWhere to use it
Recipe sites, menus and job boards often need more than yes or no: people want dishes with chicken but without nuts, or jobs in design but not in agencies. These chips cycle through neutral, include and exclude. Included chips turn green with a plus, excluded ones turn red with a cross and a strike through the label.
Each chip is a button with aria-pressed and an aria-label that names the state, so screen readers hear included or excluded. A short hint under the chips explains the gesture to first time users.