Ingredientes
Un toque para incluir, dos para excluir
Chips à inclure ou exclure
Chaque chip a trois états : un appui l'inclut, un deuxième l'exclut et le troisième le remet à zéro.
Réglages
Code
<div class="uv-fie"><p class="ti">Ingrédients</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>Produits laitiers</span></button><button type="button" data-s="out"><i aria-hidden="true"></i><span>Épicé</span></button><button type="button" data-s="off"><i aria-hidden="true"></i><span>Fruits à coque</span></button><button type="button" data-s="off"><i aria-hidden="true"></i><span>Fruits de mer</span></button></div><p class="hn">Un appui pour inclure, deux pour exclure</p></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Filtres
Voir tout : FiltresOù l’utiliser
Les sites de recettes, les menus et les offres d'emploi ont souvent besoin de plus que oui ou non : des plats au poulet mais sans fruits à coque, des postes en design mais pas en agence. Ces chips passent par neutre, inclus et exclu. Les inclus deviennent verts avec un plus, les exclus rouges avec une croix et le texte barré.
Chaque chip est un bouton avec aria-pressed et un aria-label qui nomme l'état, les lecteurs d'écran annoncent donc inclus ou exclu. Une indication sous les chips explique le geste.