DokumentacjaKomponenty
Pole wyboru
Wiersze zgód z linkami, gwiazdką i błędem.
*Akceptuję regulamin serwisu
- 1Natywne pole 16 px, głęboki niebieski po zaznaczeniu
- 2Wiersz: min. wysokość 44 px, odstęp 12 px, wyrównanie do góry; cel dotyku niesie etykieta
- 3Etykieta 14 px, slate-700; może się łamać i zawierać linki
- 4Znak wymagania: pogrubiona gwiazdka w tokenie destructive
Warianty
Jedno pole wyboru, zbudowane pod wiersze zgód: długa, łamiąca się etykieta zostaje wyrównana do pola u góry.
Stany
Fokus jest poniżej wymuszony, żeby było go widać bez klawiatury; pola wyżej reagują na prawdziwy fokus. Zaznaczenie to natywne pole przeglądarki w kolorze głębokiego niebieskiego.
Zaakceptuj regulamin, żeby założyć konto
API
Propsy Checkbox.
| Prop | Typ | Domyślnie | Opis |
|---|---|---|---|
id | string | – | Wymagane. Łączy etykietę z polem i tworzy id błędu. |
label | node | – | Wymagane. Tekst wiersza; może zawierać linki (zgody). |
required | boolean | false | Dodaje czerwoną gwiazdkę przed etykietą i natywny atrybut required. |
error | string | null | – | Komunikat pod wierszem; ustawia aria-invalid, ogłaszany jako alert. |
…atrybuty input | checked, onChange, disabled, name… | – | Każdy natywny atrybut pola wyboru poza type przechodzi dalej. |
Dostępność
- Natywne pole wewnątrz etykiety: Spacja je przełącza, a cały wiersz 44 px jest celem dotyku.
- Linki w etykiecie otwierają dokument i nie przełączają pola.
- Gwiazdka jest dekoracyjna (aria-hidden); natywny atrybut required mówi czytnikom, że pole jest wymagane.
- Błąd: aria-invalid, powiązany przez aria-describedby, ogłaszany jako alert. Fokus: obrys 3 px w tokenie focus-ring, odsunięty o 2 px.
- Kontrast: etykieta 9,4:1, zaznaczone pole 7,6:1 na tle strony; błąd 4,8:1 na białej karcie (4,4:1 na liliowym tle, więc wiersze zgód stoją na kartach).
- Uczciwie: etykieta ma w kodzie kolor na hover, ale tekst ustawia własny kolor, więc hover nie jest widoczny. Albo usunąć regułę, albo przenieść ją na tekst.
Dobre praktyki
Zgadzam się, żeby organizator robił zdjęcia podczas zajęć.