Câmp text

Prezentare

Colectează o valoare scurtă, pe un singur rând, folosind tipul HTML nativ potrivit conținutului (email, tel, text, number etc.).

Când se folosește

• pentru o singură valoare scurtă, verificabilă printr-un tip HTML nativ (e-mail, telefon, text simplu);
• cu `sd-input--width-10`/`sd-input--width-20` atunci când formatul așteptat are o lungime fixă cunoscută (de exemplu un cod).

Când nu se folosește

• pentru text pe mai multe rânduri — acolo se folosește `textarea`;
• pentru alegerea dintr-o listă predefinită — acolo se folosesc `select`, `radio` sau `segmented-control`.

Anatomie

Un `<input class="sd-input">` cu `type` HTML nativ potrivit și `id` legat de `label` prin `for`. Validarea eșuată se comunică prin `aria-invalid="true"`, nu printr-o clasă CSS separată.

Variante

• implicit (lățime maximă 32rem)
• `sd-input--width-10` / `sd-input--width-20` — lățimi reduse, pentru valori scurte cunoscute

Stări

• implicit;
• :hover — bordură mai închisă;
• `aria-invalid="true"` — bordură și contur roșu, pentru câmpul cu eroare de validare;
• :disabled — bordură și fundal dezactivate, cursor `not-allowed`;
• `readonly` — bordură punctată, fundal subtil, distinct vizual de `disabled`;
• :focus-visible — contur vizibil conform tokenilor de focus.

Comportament

Fără CSS: rămâne un `<input>` HTML standard, complet funcțional. Starea de eroare (`aria-invalid`) e independentă de CSS — atributul rămâne prezent pentru tehnologiile asistive chiar dacă stilurile nu sunt încărcate.

Reguli de conținut

• label-ul explică ce se cere; formatul așteptat, dacă nu e evident, merge în `hint`, nu în `placeholder`.

Responsabilitățile implementatorului

• alege tipul HTML corect (`email`, `tel`, `text` etc.) — tipul greșit strică tastatura mobilă și validarea nativă a browserului;
• setează `aria-invalid="true"` doar după o validare eșuată reală, nu implicit.

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-email">Adresa de e-mail</label><input class="sd-input" id="catalog-email" type="email" autocomplete="email">

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