Komponent wejścia wyszukiwania

Projektuj wejścia wyszukiwania z ikonami, sugerowanymi wynikami, wsparciem klawiatury i ac

Ikona wyszukiwania w lewym górnym rogu, pełnowysokościowy wprowadź tekst oraz nieobowiązkowa ikona czyszczenia w prawym dolnym rogu. Margines wynosi 12–14px pionowo i 14–16px poziomo; granica ma grubość 1px neutralną z promieniem kątowym 8px, a także efekt cienia-1.

Domyślny, nadany myszką oraz stan skupienia zawierają pękatą ramkę do wskazania aktywnych elementów.

Wyłączone: zmutowana tekst i ikona; brak cienia.

Ten stan błędu pojawia się w momencie wymagania walidacji, np. ograniczenia minimalnej długości. Jasno komunikuje on problem użytkownikowi.

Sugestie i Rezultaty są wyświetlane razem z tym stanem błędu.

Pasek rozwijany pod polem wejścia z maksymalną wysokością do przewijania, nawigacja klawiatury, wysoka

Ikona lupa używa podstawowej palety kolorów; po wprowadzeniu tekstu pojawi się znak (×) usuwający. Oba elementy muszą być dostępnymi dla klawiatury, a kliknięcie ‘usuń’ resetuje pole i sugestie.

Dostępne jest etykietka widoczna lub aria-label dostarczająca kontekstu; lista sugerowanych wyników jest powiązana za pomocą aria-controls / aria-expanded. Anonsuj liczbę wyników i upewnij się, że cele mają 44px; zapewnić klawisz ucieczki do zamknięcia listy.

Często zadawane pytania

Wypróbuj na żywo

Wszystko powyżej działa bezpośrednio w Twojej przeglądarce — otwórz Hash Function Avalanche Visualizer i zmieniaj parametry podczas działania. Nic nie jest instalowane ani przesyłane na serwer, cały model działa w jednej karcie.