Combobox

A combobox segítségével egy hosszabb listából szűrve választhat a felhasználó.

Béta kiadás

Ez a komponens még fejlesztés alatt áll. Ha kérdésed vagy javaslatod van, vedd fel velünk a kapcsolatot!

Felépítés

A combobox egy text field és egy select komponens kombinációjából áll.

A clear buttonnal törölhető a tartalom. A chevronnal nyitható le az opciókat tartalmazó drop list.

Label

A comboboxhoz 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.

Required és optional állapotok

A label mögötti piros csillaggal jelezhető, ha kötelező kitölteni a comboboxot. A label mögötti (Nem kötelező) felirattal jelezhető, ha opcionális a combobox kitöltése. (Csak akkor használjuk, ha egyébként a többi mező kitöltése kötelező.)

Méretvariációk

Small és large méretben használható.

Error állapot

Error (hiba) állapot esetén a combobox piros keretet kap. A hibaüzenet a komponens alatt jelenik meg.

Disabled állapot

Disabled állapotban a combobox és a hozzá tartozó label is alacsonyabb kontrasztú lesz. A programatikusan, nem csak vizuálisan disabled állapot használata kerülendő.

Read-only állapot

Read-only állapotban a combobox nem interaktív, de a szöveg kimásolható belőle.

Interakciós állapotok

Az interakciós állapotok a design system sztenderd logikáját, illetve a comboboxot alkotó text field és select komponensek állapotait követik. A clear button és az opciókat lenyitó chevron interaktív, ezért ezek saját állapotokkal rendelkeznek.

Interaktív terület

A komponens a labelre kattintva aktiválható. A szövegbeviteli mező, a clear button és az opciókat lenyitó chevron külön-külön képeznek interaktív felületeket.

Loading állapot

Ha az opciók listája dinamikusan áll elő, loading (töltő) állapotot használunk. Loading állapotban az opciókat lenyitó chevron helyett egy loading spinner jelenik meg. Ebben az állapotban nem lehet interaktálni a komponenssel.

Autocomplete opció

Az autocomplete opció bekapcsolása automatikusan a javasolt opcióra egészíti ki a beviteli mezőbe írt szöveget.

Akadálymentesítés

A combobox akadálymentesítési szempontból az egyik legösszetettebb komponens. Az implementációnál javasolt követni a W3C Web Accessibility Initiative által publikált

implementációs segédletet