Components · Forms

Checkbox & Radio

Form içinde gönderilen seçimler. Checkbox sıfır veya çoklu seçim, Radio tam bir seçim. Beş durum (off/on/indeterminate/disabled/invalid) ve büyük "kart" formundaki radio kullanımı dahil.

01 · Durum matrisi

offondisabledinvalid checkbox indeterm. radio

02 · Liste kullanımı

Checkbox · çoklu seçim + indeterminate
Radio · ödeme yöntemi

03 · Kart formundaki radio

Plan / strateji seçicilerde — büyük tıklama alanı, görsel hiyerarşi

Kurallar

· 16×16 box, 1.5px border, 4px radius (checkbox) / 9999px (radio). Aktif: --nb-primary; tick rengi beyaz, stroke-width 3.
· Indeterminate sadece checkbox'ta — "tümü", "hiçbiri", "kısmi" üçlüsünü temsil eder. input.indeterminate = true JS ile set edilir.
· Hit area: label tıklanabilir; minimum 32×32. Form list'lerinde her satır tüm label genişliğinde tıklanır.
· Disabled: opacity .5 + label cursor: not-allowed. Pasif öğeyi gri yap, gizleme.
· Invalid: border --nb-danger, focus halkası danger varyantı; hata mesajı label'ın altında, asla yanında.
· Radio her zaman bir name grubuyla yaşar — tek başına radio yazma. Form'da en az 2 seçenek olmalı (yoksa checkbox kullan).
· Erişilebilirlik: gerçek <input type=checkbox/radio> kullan, ARIA simülasyonu yapma. Label for ile bağlı.