Zonă de text

Prezentare

Colectează text pe mai multe rânduri, cu o limită vizibilă atunci când conținutul are o constrângere de lungime.

Când se folosește

• pentru text liber, pe mai multe rânduri — motive, observații, descrieri;
• combinat cu `character-count` atunci când există o limită reală de caractere.

Când nu se folosește

• pentru o singură valoare scurtă — acolo se folosește `input`;
• pentru alegerea dintr-un set fix de opțiuni — acolo se folosesc `select` sau `radio`.

Anatomie

Un `<textarea class="sd-textarea">`, înălțime minimă 10rem, redimensionabil vertical (`resize: vertical`).

Variante

• implicit — o singură variantă de dimensiune

Stări

• implicit
• :hover
• `aria-invalid="true"`
• :disabled
• `readonly`
• :focus-visible

Comportament

Fără CSS: `<textarea>` HTML standard. Redimensionarea verticală e nativă browserului, fără JavaScript.

Reguli de conținut

• dacă are o limită de caractere, limita e comunicată prin `character-count`, nu doar prin trunchiere silențioasă la trimitere.

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-message">Mesaj</label><textarea class="sd-textarea" id="catalog-message" rows="4"></textarea>

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