Text ajutător

Prezentare

Oferă instrucțiuni sau context suplimentar înaintea completării unui câmp, fără să înlocuiască label-ul.

Când se folosește

• când formatul așteptat nu e evident din tipul câmpului (de exemplu „13 cifre, fără spații” pentru CNP);
• când o explicație scurtă previne o eroare de completare mai eficient decât un mesaj de eroare ulterior.

Când nu se folosește

• pentru text care repetă label-ul sau nu adaugă informație nouă;
• ca substitut al unui mesaj de eroare — `hint` apare înainte de completare, `error-message` după validare, cu roluri diferite.

Anatomie

Un `<p class="sd-hint">`, plasat între `label` și control, legat de control prin `aria-describedby` atunci când implementarea o cere (de exemplu la câmpul CNP din serviciile de referință).

Variante

• implicit — un singur stil

Stări

• nu are stări interactive proprii

Comportament

Element static, fără comportament JavaScript; rămâne vizibil identic indiferent de starea controlului asociat.

Reguli de conținut

• rămâne scurt — o propoziție, nu un paragraf; explicații mai lungi merg în conținutul din jurul formularului, nu în hint.

Responsabilitățile implementatorului

• leagă `hint`-ul de control prin `aria-describedby` de fiecare dată când conținutul lui e necesar pentru completarea corectă, nu doar decorativ.

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';

<p class="sd-hint" id="catalog-hint">Scrie numele așa cum apare în actul de identitate.</p>

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).