Filter-Chips mit Häkchen
Ein kleiner Punkt dreht sich und wird zum Häkchen, sobald die Option aktiv ist. Mehrere Chips gleichzeitig sind möglich.
Einstellungen
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>Alle</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>Fotos</button></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
Wofür du ihn nutzen kannst
Die richtige Wahl, wenn man Optionen kombinieren kann, zum Beispiel die Ausstattung auf einer Seite für Ferienwohnungen: WLAN, Pool, Parkplatz, Haustiere erlaubt. Das Häkchen zeigt klar, was an ist und was nicht. Das hilft, wenn vier oder fünf Filter gleichzeitig aktiv sind. Wer Mehrfachauswahl-Chips oder Checkbox-Chips sucht, ist hier richtig.
Da sich die Chips an- und ausschalten lassen, sollte die Liste oder die Trefferzahl sofort reagieren. So merkt man, dass jeder Tipp etwas bewirkt. Für Fragen mit nur einer Antwort, etwa die Sortierung, sind sie ungeeignet. Dort ist ein Segmented Control eindeutiger.