Label

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

export default function LabelDemo() {
  return (
    <div className="flex items-center gap-2.5">
      <Checkbox id="label-demo-terms" defaultChecked />
      <Label htmlFor="label-demo-terms">
        Powiadamiaj mnie e-mailem, gdy ktoś mnie oznaczy
      </Label>
    </div>
  )
}

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.

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

export default function LabelWithInput() {
  return (
    <div className="flex w-72 flex-col gap-2">
      <Label htmlFor="label-with-input">Nazwa wyświetlana</Label>
      <Input id="label-with-input" defaultValue="Ada Lovelace" />
    </div>
  )
}

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.

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

export default function LabelOptional() {
  return (
    <div className="flex w-full max-w-md flex-col gap-5">
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-optional-name">Imię i nazwisko</Label>
        <Input id="label-optional-name" required autoComplete="name" />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-optional-company">
          Firma
          <span className="font-normal text-muted-foreground">(opcjonalnie)</span>
        </Label>
        <Input id="label-optional-company" autoComplete="organization" />
      </div>
    </div>
  )
}

Wyłączone kontrolki#

Etykieta umieszczona w DOM za swoją kontrolką przygasa, gdy kontrolka jest wyłączona. Etykieta reaguje na poprzedzający ją element z klasą peer: kontrolki Base UI, takie jak Checkbox i Switch, mają tę klasę i zgłaszają stan atrybutem data-disabled. Natywna kontrolka jest dopasowywana przez :disabled, ale dopiero gdy dodasz do niej className="peer"; Input nie ma klasy peer. Etykieta umieszczona nad kontrolką nie może użyć selektora rodzeństwa, więc w takim układzie użyj FieldLabel wewnątrz Field z atrybutem data-disabled.

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

export default function LabelDisabled() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2.5">
        <Switch id="label-disabled-sync" defaultChecked />
        <Label htmlFor="label-disabled-sync">Synchronizuj na wszystkich urządzeniach</Label>
      </div>
      <div className="flex items-center gap-2.5">
        <Switch id="label-disabled-beta" disabled />
        <Label htmlFor="label-disabled-beta">Funkcje beta (tylko dla administratorów)</Label>
      </div>
    </div>
  )
}

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.