Radio
Construit pe <input type="radio"> nativ cu appearance:none. Apare mereu în grup de minim 2, toate cu același name.
Markup canonic · components/radio.json
sursa = JSON · generat de scripts/build-catalog.py
Stări
.radio-item · un singur element selectabil din grup
Cu sub-label
descriere secundară · .radio-label .sublabel
Card variant · .radio-item.card
single-line · întreg cardul e clickabil
2-line · titlu +
.sublabel · fill selectat solid (--c-accent-tint)eroare ·
<input class="error"> · fundal normal, label + control roșii, chenar roșuReguli — checkbox & radio
Typescale partajat cu switch
Label pe .check-label / .radio-label = .t-ctrl (15/22, ink, weight 400). Sublabel = .t-ctrl-desc (13/18, fog). Aceleași token-uri pe switch — controalele omoloage trebuie să arate sincronizate când apar împreună.
Input 18×18, margin-top 2px
Inputul stă pe flex-shrink:0 cu margin: 2px 0 0 ca să fie centrat optic pe prima linie a label-ului (15/22).
Minim 2 opțiuni
Radio apare mereu în grup de minim 2, toate cu același name. O singură opțiune → folosește switch sau checkbox.
Card variant
Adaugă .card pe .radio-item când întreg item-ul trebuie să fie clickable cu chenar — wizard-uri, plan picker, opțiuni mari cu context.