Mehrfachauswahl mit Chips
Mehrere Optionen mit animierten Checkboxen wählen, die dann als Chips über dem Button erscheinen.
Einstellungen
Code
<div class="uv-fdm"><div class="tags"></div><button class="tg">Filter hinzufügen <i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="mn"><button data-v="Alle"><span class="ck"><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 data-v="Design"><span class="ck"><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 data-v="Code"><span class="ck"><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 data-v="Fotos"><span class="ck"><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><button data-v="Video"><span class="ck"><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>Video</button></div></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
Jobbörsen sind der naheliegende Einsatz: Jemand hakt Remote, Teilzeit und Freelance an und sieht seine Auswahl über dem Button, nichts verschwindet in einem geschlossenen Menü. Genauso gut funktioniert es für Skills in einem Profilformular oder Zutaten, die man auf einer Rezeptseite ausschließen will. Zu finden als Multi-Select-Dropdown mit Checkboxen.
Erst die Chips darüber machen die Sache benutzbar, lass ihnen also Platz für eine zweite Zeile. Wenn Leute oft mehr als fünf Optionen wählen, ist eine Seitenleiste mit Checkboxen angenehmer als ein Menü.