Radio

Prezentare

Permite alegerea unei singure opțiuni dintr-un grup exclusiv de variante predefinite.

Când se folosește

• pentru 2-5 opțiuni stabile, exclusive reciproc;
• în interiorul unui `fieldset`/`legend`, niciodată izolat.

Când nu se folosește

• pentru opțiuni independente, neexclusive — acolo se folosește `checkbox`;
• pentru multe opțiuni (peste 5-7) — acolo se preferă `select`.

Anatomie

La fel ca `checkbox`, dar cu `type="radio"` și același `name` pentru toate opțiunile din grup, în interiorul unui `fieldset`/`legend`.

Variante

• implicit

Stări

• implicit
• selectat (`:checked`)
• :disabled
• :focus-visible

Comportament

Fără CSS: grup radio HTML nativ; navigarea cu săgeți între opțiunile aceluiași `name` e comportament implicit al browserului, fără JavaScript.

Reguli de conținut

• opțiunile sunt reciproc exclusive cu adevărat — dacă două opțiuni ar putea fi ambele adevărate, structura corectă e `checkbox`, nu `radio`.

Responsabilitățile implementatorului

• toate input-urile radio din același grup logic au exact același `name`, altfel grupul nu mai e exclusiv.

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">Format</legend><label class="sd-choice"><input type="radio" name="format" checked> Digital</label><label class="sd-choice"><input type="radio" name="format"> Hârtie</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).