Label

Prezentare

Identifică explicit scopul unui control de formular, rămânând permanent vizibil — spre deosebire de un placeholder, care dispare la completare și nu poate înlocui un label.

Când se folosește

• pentru orice control de formular (input, textarea, select) sau, ca wrapper, pentru fiecare checkbox și radio din `.sd-choice`;
• ca prim element vizibil legat de control, înaintea oricărui text ajutător (`hint`).

Când nu se folosește

• ca placeholder în interiorul câmpului — placeholder-ul nu mai e vizibil odată completat câmpul și nu poate substitui un label;
• ascuns vizual (`sd-visually-hidden`) fără un motiv de design explicit — rămâne excepția, nu regula.

Anatomie

Un `<label class="sd-label">` cu atributul `for` legat de `id`-ul controlului asociat. Pentru checkbox și radio, eticheta face parte din `.sd-choice__label`, în interiorul wrapper-ului `<label class="sd-choice">`, nu dintr-un `<label class="sd-label">` separat.

Variante

• implicit
• `sd-label--large` — dimensiune de font crescută, pentru întrebări cu greutate vizuală mai mare (de exemplu întrebarea de eligibilitate dintr-un pattern)

Stări

• nu are stări interactive proprii

Comportament

Fără CSS și fără JavaScript: rămâne text simplu, legat semantic de control prin `for`/`id` — suficient pentru orice tehnologie asistivă, inclusiv fără stilurile Sistem Digital încărcate.

Reguli de conținut

• textul este întrebarea sau numele câmpului, nu instrucțiunea de completare — instrucțiunile merg în `hint`, nu în `label`;
• rămâne scurt și afirmativ, conform ghidului general de content design.

Responsabilitățile implementatorului

• atributul `for` trebuie să corespundă exact `id`-ului controlului — verificabil automat prin testele de accesibilitate existente.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/49 (site extern)

Istoric

Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.

Preview și markup canonic

Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.

Instalare și importuri

pnpm add @sistem-digital/tokens @sistem-digital/components

@import '@sistem-digital/components/forms.css';

<label class="sd-label" for="catalog-name">Nume complet</label>

Contract și surse

• Documentația familiei Formulare
• Codul sursă (site extern)
• Changelog (site extern)

Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.

Matricea design–cod

Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).