DokumentacjaKomponenty
Przełącznik segmentowy
Jeden wybór z kilku, widocznych naraz.
- 1Grupa: radiogroup z nazwą, co najmniej 44 px wysokości
- 2Tor: 36 px, tło muted, promień 12 px, wcięcie 3 px
- 3Wybrany segment: biała karta, pierścień 2 px slate, podpis 600
- 4Pozostałe segmenty: podpis 500 w slate-600; samo radio jest ukryte wizualnie
Warianty
Jeden wygląd, dwie lub trzy opcje. Kontrolka przełącza sposób, np. jak liczona jest cena albo jak dzielona jest grupa, i zajmuje pełną szerokość kontenera.
Stany
Hover zmienia podpis na głęboki niebieski, także na wybranym segmencie. Fokus rysuje pierścień 3 px wokół całego segmentu. Przykłady wyżej reagują na prawdziwy wskaźnik i strzałki.
API
Komponent kontrolowany: aplikacja trzyma wartość i przekazuje podpisy z tłumaczeń.
| Prop | Typ | Domyślnie | Opis |
|---|---|---|---|
name | string | – | Wspólna nazwa pól radio. |
label | string | – | Nazwa grupy dla czytnika ekranu (aria-label grupy radio). |
value | string | – | Wartość wybranego segmentu. |
options | lista { value, label } | – | Dwie lub trzy równorzędne opcje; długie podpisy są przycinane. |
onChange | funkcja (value) | – | Wywoływana z nową wartością; wybór kontroluje aplikacja. |
className | string | – | Dodatkowe klasy zewnętrznego kontenera. |
Dostępność
- Zbudowany z natywnych pól radio w nazwanej grupie radiogroup: strzałki zmieniają wybór, czytnik ogłasza „2 z 3, zaznaczone”.
- Pola radio są ukryte wizualnie, ale zostają w drzewie dostępności; celem kliknięcia jest cały segment.
- Tor ma 36 px, ale każdy segment powiększa obszar trafienia o 4 px w górę i w dół, a grupa ma co najmniej 44 px wysokości.
- Wybór nie jest pokazany samym kolorem: wybrany segment staje się białą kartą z pierścieniem i grubszym podpisem.
- Kontrast: niewybrany podpis 6,9:1 na torze, wybrany 20,2:1 na bieli, hover 7,7:1.