DokumentacjaKomponenty
Lista rozwijana
Jedyna lista rozwijana: natywny select w dwóch układach.
Kategoria Jedna kategoria na zajęcia.
- 1Etykieta nad listą (field) albo obok (inline)
- 2Natywny select w pigułce pola: min. 44 px, ramka 2 px
- 3Strzałka 16 px od aplikacji, 16 px od prawej krawędzi, nie przechwytuje wskaźnika
- 4Linia podpowiedzi albo błędu pod polem
Warianty
Dwa układy jednego komponentu. Field stoi w formularzach i wygląda jak pole tekstowe. Inline stoi w pasku listy: etykieta obok, wartość pogrubiona.
W latach
Stany
Układ field. Fokus jest poniżej wymuszony, żeby było go widać bez klawiatury; listy wyżej reagują na prawdziwy fokus.
Wybierz kategorię zajęć
API
Propsy SelectField. Pozostałe natywne atrybuty selecta (value, onChange, disabled…) przechodzą dalej.
| Prop | Typ | Domyślnie | Opis |
|---|---|---|---|
id | string | – | Wymagane. Łączy etykietę z listą. |
label | string | – | Wymagane. Obok listy (inline) albo nad nią (field). |
layout | "inline" | "field" | "inline" | Inline: mała lista w pasku listy. Field: pole formularza wyglądające jak pole tekstowe. |
variant | "plain" | "outline" | "plain" | Tylko inline. Plain bez ramki (sortowanie), outline z ramką (liczba na stronie). |
labelFromMd | boolean | false | Tylko inline. Etykieta widoczna od 768 px; na telefonie zostaje dla czytników. |
hint | string | – | Tylko field. Tekst pod listą, powiązany przez aria-describedby. |
error | string | null | – | Tylko field. Komunikat pod listą; ustawia aria-invalid, ogłaszany jako alert. |
chevron | node | – | Ikona strzałki od aplikacji. Bez niej zostaje natywna strzałka przeglądarki. |
children | elementy option | – | Zwykłe natywne opcje. |
Dostępność
- Natywny select: klawiatura, czytniki i systemowy wybór na telefonie działają bez dodatkowego kodu.
- Cel dotyku co najmniej 44 px w obu układach; strzałka nie przechwytuje wskaźnika, więc całą pigułkę da się kliknąć.
- Field: podpowiedź i błąd są powiązane przez aria-describedby; błąd ustawia aria-invalid i jest ogłaszany jako alert.
- Inline z labelFromMd: etykieta jest wizualnie ukryta na telefonie, ale zostaje dla czytników.
- Kontrast: wartość 19,3:1 na tle pola, podpowiedź 6,9:1, etykieta inline 6,9:1 i ramka outline 13,3:1 na tle strony; błąd 4,8:1 na białej karcie (4,4:1 na liliowym tle, więc formularze na kartach).
Dobre praktyki
Kategoria