Fieldset

Prezentare

Grupează semantic mai multe controale care răspund aceleiași întrebări — de exemplu un grup de radio sau checkbox — astfel încât tehnologiile asistive anunțe grupul, nu doar fiecare control izolat.

Când se folosește

• pentru orice grup de radio sau checkbox care aparțin aceleiași întrebări;
• oriunde `legend` e necesar — cele două există întotdeauna împreună.

Când nu se folosește

• pentru un singur control izolat (input, textarea, select) — acestea folosesc direct `label`, fără fieldset;
• pentru gruparea vizuală a unor controale fără legătură logică — fieldset e semantic, nu un container de layout.

Anatomie

Un `<fieldset class="sd-fieldset">` fără chenar vizual propriu (stilul implicit de browser e resetat), cu `<legend class="sd-legend">` ca prim copil, urmat de `.sd-choice-list` cu controalele grupate.

Variante

• implicit — un singur stil, complet definit de `legend` și de conținut

Stări

• nu are stări interactive proprii

Comportament

Fără CSS: fieldset/legend rămân native browserului, deja semantic corecte. Cu CSS: chenarul implicit e eliminat, dar structura semantică (anunțată de cititoarele de ecran) nu se schimbă.

Responsabilitățile implementatorului

• nu se imbrică un `fieldset` în altul fără un motiv explicit de grupare pe două niveluri — imbricarea inutilă îngreunează navigarea cu cititorul de ecran.

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

<fieldset class="sd-fieldset"><legend class="sd-legend">Cum vrei să primești răspunsul?</legend><label class="sd-choice"><input type="radio" name="delivery" checked> Digital</label></fieldset>

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