A search field lehetővé teszi a felhasználók számára, hogy szót vagy kifejezés alapján megtalálják a releváns tartalmakat.
A search field egy speciális combobox komponens, amely egy ikonnal és autocomplete opciót használva egy highlighttal bővül.
A komponenshez alapértelmezetten label is tartozik, amely csak nagyon indokolt esetben hagyható el. Ha elhagyjuk a labelt, fontos, hogy legyen egy nem látható, de az asszisztív technológiák számára elérhető label a kódban. A labelhez opcionálisan secondary text is tartozhat.
Small és large méretben használható.
Error (hiba) állapot esetén a komponens piros keretet kap. A hibaüzenet a komponens alatt jelenik meg.
Disabled állapotban a field és a label is alacsonyabb kontrasztú lesz.
Read-only állapotban a search field nem interaktív, de a szöveg kimásolható belőle.
Az interakciós állapotok a design system sztenderd logikáját, illetve a search fieldet alkotó combobox állapotait követik.
A clear button külön fókuszálható.
A komponens a labelre kattintva aktiválható. A mező és a clear button külön-külön képeznek interaktív felületeket.
Ha az opciók listája dinamikusan áll elő, loading (töltő) állapotot használunk. Loading állapotban a clear button helyett egy loading spinner jelenik meg.
Az autocomplete opció bekapcsolása automatikusan a javasolt opcióra egészíti ki a beviteli mezőbe írt szöveget.
