Checkbox

Construit pe <input type="checkbox"> nativ cu appearance:none. Wrapper-ul .check-item face tot label-ul clickabil. Grupurile folosesc .check-group.

Markup canonic · `components/checkbox.json`

sursa = JSON · generat de scripts/build-catalog.py

Am citit termenii și condițiile Notificări email Primești un rezumat zilnic cu activitatea contului

Stări

.check-item · default · checked · indeterminate · disabled · error

Opțiune neselecată Opțiune selectată Indeterminate Când o parte din sub-opțiuni sunt bifate Disabled — nebifat Disabled — bifat Eroare — selectează cel puțin o opțiune

Cu sub-label

.check-label .sublabel — descriere secundară

Notificări email Primești un rezumat zilnic cu activitatea contului Rapoarte lunare PDF cu situația financiară trimis la sfârșitul lunii Alerte ANAF Te anunțăm cu 3 zile înainte de termene de depunere

Orizontal

.check-group.row — layout orizontal pentru filtre

Facturi Bonuri Contracte Chitanțe

În context `.field`

grup cu field-label — în formulare

Tip document

Factură emisă Factură primită Bon fiscal

Selectează tipurile de documente de importat

Card variant · `.check-item.card`

single-line · întreg cardul e clickabil

Import facturi emise Import facturi primite

2-line · titlu + .sublabel · fill selectat solid (--c-accent-tint)

Notificări email Primești un rezumat zilnic cu activitatea contului Alerte ANAF Te anunțăm cu 3 zile înainte de termene de depunere

eroare · <input class="error"> · fundal normal, label + control roșii, chenar roșu

Sunt de acord cu termenii și condițiile Trebuie acceptat pentru a crea contul

Acceptă termenii pentru a continua.

Reguli — 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). Nu modifica fără să verifici alinierea.

.check-group / .radio-group

Wrap-uiește item-urile verticale într-un grup cu gap: 10px. Variantă orizontală: .row — gap: 16px, flex-wrap.

Card variant

Adaugă .card pe .check-item / .radio-item când întreg item-ul trebuie să fie clickable cu chenar — selecții vizuale, plan picker, opțiuni mari.