Suchleiste mit animiertem Lupen-Icon, Clear-Button und sanfter Cyan-Aufhellung beim Tippen.
1<div class="sb-bar" role="search">2 <svg class="sb-lupe" viewBox="0 0 24 24" fill="none" aria-hidden="true">3 <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="1.8"/>4 <path d="M21 21l-4.3-4.3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>5 </svg>6 <input id="sb-input" class="sb-input" type="search" placeholder="Komponenten durchsuchen…" aria-label="Suche" />7 <button type="button" class="sb-clear" aria-label="Eingabe löschen">8 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">9 <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>10 </svg>11 </button>12</div>Keine Installation, kein Build-Step — reine Standards, sofort einsatzbereit.
Klicke oben auf „Code kopieren“ — HTML und CSS landen in deiner Zwischenablage.
Füge das Markup an der gewünschten Stelle deiner Seite oder Komponente ein.
Übernimm den <style>-Block bzw. die Klassen in deine Stylesheet-Datei.
Aus derselben Kategorie oder mit passenden Tags.
Melde dich an, um zu kommentieren.
Premium Vue Command/Search Input mit animiertem Gradient-Ring, Floating Label, Live-Suggestions, Keyboard-Navigation, Clear-Button, Ladezustand, Statuszeile und sauberem v-model-Support. Funktioniert auch direkt in der Komponenten-Vorschau ohne externe Abhängigkeiten.