Label

Instalacja#

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/label.json

Użycie#

import { Label } from "@/components/ui/label"

<Label htmlFor="display-name">Display name</Label>
<Input id="display-name" />

Przykłady#

Z polem tekstowym#

Etykieta nad polem to układ, który najszybciej ogarnia się wzrokiem i który najlepiej znosi wąskie ekrany.

Pola opcjonalne#

Gdy większość pól w formularzu jest wymagana, oznacz wyjątki dopiskiem opcjonalnie, zamiast ozdabiać gwiazdką wszystkie pozostałe etykiety. Dopisek jest częścią etykiety, więc czytnik ekranu odczyta go razem z nazwą pola.

Wyłączone kontrolki#

Etykieta umieszczona za swoją kontrolką automatycznie przygasa, gdy kontrolka jest wyłączona — przy natywnych polach dzięki :disabled, a przy kontrolkach Base UI, takich jak Checkbox i Switch, dzięki ich atrybutowi data-disabled.

Wytyczne#

Kiedy używać#

• Do nazwania dowolnej kontrolki formularza: pól tekstowych, pól wielowierszowych, list wyboru, pól wyboru, przycisków radiowych i przełączników.
• Samodzielnie, poza Field, w małych kompozycjach, np. przy pojedynczym polu wyboru z opisem.

Kiedy nie używać#

• Jako nagłówek grupy kontrolek — użyj FieldLegend wewnątrz FieldSet; czytniki ekranu ogłaszają legendę jako nazwę grupy.
• Jako klikalny link lub przycisk — etykieta tylko ustawia fokus na swojej kontrolce albo ją przełącza.

Jak pisać etykiety#

Nazywaj rzecz, a nie czynność: E-mail, Adres rozliczeniowy, Wielkość zespołu. Wielką literą zaczynaj tylko pierwsze słowo, ogranicz się do kilku słów i pomijaj dwukropek na końcu — tę rolę pełni już wizualne powiązanie z polem. Instrukcje umieść w FieldDescription, a nie w etykiecie.

Dostępność#

• Wiąż jawnie. Ustaw htmlFor na id kontrolki. Umieszczenie kontrolki wewnątrz etykiety też działa, ale jawne powiązanie jest pewniejsze w różnych technologiach wspomagających.
• Większy cel. Kliknięcie etykiety ustawia fokus w jej polu albo przełącza jej pole wyboru, przycisk radiowy lub przełącznik — większy obszar kliknięcia pomaga wszystkim, a przy małych kontrolkach jest niezbędny (WCAG 2.5.8).
• Jedna nazwa na kontrolkę. Nie łącz widocznej etykiety z innym aria-label; widoczny tekst musi być częścią dostępnej nazwy (WCAG 2.5.3).
• Kontrast. Etykiety używają foreground w rozmiarze 14 px o średniej grubości — z kontrastem znacznie powyżej 4,5:1 w obu trybach.

Dokumentacja API#

Label#

Renderuje natywny element <label> i przyjmuje wszystkie jego atrybuty.