Ingredientes
Un toque para incluir, dos para excluir
Chips zum Ein- oder Ausschließen
Jeder Chip hat drei Zustände: einmal tippen schließt ein, zweimal schließt aus, dreimal setzt zurück.
Einstellungen
Code
<div class="uv-fie"><p class="ti">Zutaten</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>Milchprodukte</span></button><button type="button" data-s="out"><i aria-hidden="true"></i><span>Scharf</span></button><button type="button" data-s="off"><i aria-hidden="true"></i><span>Nüsse</span></button><button type="button" data-s="off"><i aria-hidden="true"></i><span>Meeresfrüchte</span></button></div><p class="hn">Einmal tippen zum Einschließen, zweimal zum Ausschließen</p></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Filter
Alle ansehen: FilterWofür du ihn nutzen kannst
Rezeptseiten, Speisekarten und Jobbörsen brauchen oft mehr als ja oder nein: Gerichte mit Hähnchen, aber ohne Nüsse, oder Designjobs, aber nicht in Agenturen. Diese Chips wechseln zwischen neutral, einschließen und ausschließen. Eingeschlossene werden grün mit Plus, ausgeschlossene rot mit Kreuz und durchgestrichenem Text.
Jeder Chip ist ein Button mit aria-pressed und einem aria-label, das den Zustand nennt, Screenreader sagen also eingeschlossen oder ausgeschlossen. Ein kurzer Hinweis darunter erklärt die Geste.