DokumentacjaKomponenty
Chip wyboru
Chipy wielokrotnego wyboru w filtrach i formularzach.
Pon Wt
- 1Ukryte natywne pole (checkbox albo radio); etykieta to cel 44 px
- 2Widoczna pigułka: 32 px wysokości, min. 44 px szerokości, ramka 1,5 px w tokenie foreground
- 3Tekst 14 px / 500; forma krótka, pełna nazwa w etykiecie dostępnej
- 4Zaznaczony: wypełnienie i ramka w głębokim niebieskim, jasny tekst
Warianty
Ta sama pigułka w dwóch rolach. Jako checkbox wybiera kilka wartości z zestawu; jako radio dokładnie jedną.
Stany
Hover i fokus są poniżej wymuszone, żeby było je widać bez myszy; chipy wyżej reagują na prawdziwy wskaźnik i klawiaturę.
Spoczynek Hover Zaznaczony Fokus Wyłączony
API
Propsy ChipToggle.
| Prop | Typ | Domyślnie | Opis |
|---|---|---|---|
id | string | – | Wymagane. Łączy widoczną pigułkę z ukrytym polem. |
label | string | – | Wymagane. Pełna nazwa dla czytnika, np. „poniedziałek” dla chipa „Pon”. |
children | node | – | Wymagane. Krótki, widoczny tekst chipa. |
type | "checkbox" | "radio" | "checkbox" | Checkbox: kilka z zestawu (dni, filtry). Radio: jeden z zestawu, w grupie radio (szybki wybór terminu). |
disabled | boolean | false | Krycie 45 %; połącz z aria-describedby wskazującym podpowiedź, dlaczego. |
…atrybuty input | checked, onChange, name… | – | Każdy natywny atrybut pola poza type i children przechodzi dalej. |
Dostępność
- Prawdziwy checkbox albo radio pod pigułką: Spacja przełącza, strzałki poruszają się w grupie radio, stan jest ogłaszany.
- Pigułka ma 32 px wysokości, ale etykieta wokół niej daje cel dotyku 44 px.
- Krótki tekst na ekranie, pełna nazwa dla czytnika: „Pon” jest czytane jako „poniedziałek”.
- Zaznaczenie zmienia wypełnienie, ramkę i tekst, nie tylko odcień. Fokus: obrys 3 px w tokenie ring, odsunięty o 2 px.
- Kontrast: tekst 20,2:1 na białej pigułce, zaznaczony 7,6:1, ramka 18,3:1 na tle strony.
- Wyłączony chip dostaje aria-describedby wskazujące podpowiedź, dlaczego jest niedostępny.