Checkbox

Prezentare

Permite selectarea independentă a uneia sau mai multor opțiuni dintr-un set, fiecare putând fi bifată sau nu, fără să se excludă reciproc.

Când se folosește

• pentru opțiuni independente (fiecare poate fi adevărat sau fals separat);
• pentru o singură declarație de acceptare (de exemplu declarația de corectitudine a datelor din serviciile de referință).

Când nu se folosește

• pentru alegere exclusivă dintr-un set — acolo se folosește `radio`;
• pentru o comutare imediată, binară, fără pas de confirmare separat — acolo se folosește `switch` (familia Interactive).

Anatomie

Un `<label class="sd-choice">` care conține direct `<input type="checkbox" class="sd-choice__control">` și `<span class="sd-choice__label">`, opțional urmat de `<span class="sd-choice__hint">`.

Variante

• implicit — grupate în `sd-choice-list` când sunt mai multe

Stări

• implicit
• bifat (`:checked`, stil nativ browser peste `accent-color`)
• :disabled — cursor `not-allowed`, opacitate redusă pe întregul `.sd-choice`
• :focus-visible — contur pe control

Comportament

Fără CSS: checkbox HTML nativ, complet funcțional. Zona clicabilă acoperă tot wrapper-ul `.sd-choice` (grid pe toată lățimea), nu doar caseta mică, pentru o țintă de atingere suficientă.

Reguli de conținut

• eticheta descrie exact ce se bifează — nu o instrucțiune generică precum „Sunt de acord”, fără context despre cu ce anume.

Responsabilitățile implementatorului

• `sd-choice__hint` se leagă de control prin `aria-describedby` când conține informație necesară deciziei, 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';

<label class="sd-choice"><input type="checkbox" checked> Doresc notificări electronice</label>

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