Listă de selecție

Prezentare

Permite alegerea unei singure valori dintr-o listă predefinită, scurtă și stabilă.

Când se folosește

• când opțiunile sunt multe (peste 5-7) sau pot crește în timp, astfel încât `radio` ar deveni greoi vizual;
• când opțiunile sunt deja cunoscute și stabile (de exemplu o listă de județe).

Când nu se folosește

• pentru 2-5 opțiuni stabile — `radio` sau `segmented-control` sunt mai vizibile și necesită mai puține interacțiuni;
• pentru selecție multiplă — `<select>` nativ cu selecție multiplă are o interacțiune neobișnuită; se preferă un grup de `checkbox`.

Anatomie

Un `<select class="sd-select">` (lățime maximă 24rem) cu elemente `<option>` native.

Variante

• implicit — o singură variantă

Stări

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

Comportament

Element `<select>` HTML nativ — meniul, navigarea cu tastatura și selecția sunt gestionate integral de browser, fără JavaScript.

Reguli de conținut

• prima opțiune vizibilă nu e o valoare validă implicită („Alege o opțiune”), ca să nu fie confundată cu un răspuns real deja completat.

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-county">Județ</label><select class="sd-select" id="catalog-county"><option>Cluj</option><option>Alba</option></select>

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