M.AIM.AISoloLabsUI Sözlüğü · Girdi

← UI Sözlüğü

Onay kutusu checkbox

bilinen diğer adları checkbox · işaret kutusu · tik kutusu

Böyle diyorsan: "tik atılan kare" · "kabul ediyorum kutusu" → bunun adı onay kutusu.

İşaretlenip kaldırılabilen kare; birden çok seçime izin verir.

Onay kutusu bağımsız bir evet/hayır seçimidir: yanındakilerle ilişkisi yoktur, birden çoğu aynı anda işaretlenebilir. Anahtardan farkı görünüş değil ZAMANLAMADIR — onay kutusu bir NİYET bildirir ve etkisi form gönderilince doğar; anahtar ise anında etkili bir sistem durumudur. Üçüncü bir hâli daha vardır ve sık atlanır: kısmen işaretli (indeterminate), yani 'tümünü seç' başlığı altındaki seçeneklerin bir kısmı seçiliyken görünen ara durum. İşaretlemeyi geri alabilirsin — bu, seçenek düğmesinden ayrıldığı önemli bir noktadır.

Kapsam: Bu madde bağımsız çoklu seçimi kapsar. Gruptan yalnız bir tane seçtiren yuvarlak düğme Seçenek Düğmesi maddesinde, anında etkili aç/kapa ise Anahtar maddesindedir.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
İletişim izinleri
1/2 seçili — istediğin an değiştir
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
KVKK onayı ekle: gerçek checkbox + metni tıklanabilir label ('Aydınlatma metnini okudum' — metin linkli); işaretlenmeden gönder butonu disabled; sunucu tarafında da onay alanı doğrulansın; onay zamanı kayda yazılsın (denetim izi).
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Checkbox'ım huysuz; klasikleri sırayla ele: (1) label bağlı değil — metne tıklamak işaretlemiyor, minik kareyi tutturmak gerekiyor; (2) zorunlu-onay yalnız client'ta — devtools'la buton açılıp onaysız gönderilebiliyor; (3) checkbox div+ikonla taklit edilmiş, Space/klavye çalışmıyor; (4) 'tümünü seç' alt seçimlerle senkron değil (indeterminate yok); (5) onayın NE ZAMAN verildiği kaydedilmiyor. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Kutu<input type=checkbox>

    Gerçek checkbox elementi; div'le taklit edilirse klavye ve okuyucu desteği sıfırlanır.

  • 2Etiket<label> bağlı

    Metne tıklamak da kutuyu işaretler — tıklama alanını 10 kat büyütür.

  • 3Grup başlığıfieldset/legend

    İlişkili onaylar tek grup altında; 'tümünü seç' varsa ara-durum (indeterminate) gerekir.

  • 4Zorunlu-onay bağıdisabled buton

    KVKK gibi onaylar gönder butonunu yönetir; ama SUNUCU da ayrıca doğrular — client aldatılabilir.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • Aİşaretsizchecked=false

    Varsayılan hâl. Zorunlu onaylarda (KVKK gibi) önceden işaretli GELMEMELİ — kullanıcının eylemi olmadan verilmiş onay, onay değildir.

  • Bİşaretlichecked

    Kullanıcı seçti. Geri alınabilir; kaldırmak da tek tıktır — seçenek düğmesinden ayrıldığı yer burasıdır.

  • CKısmen işaretliel.indeterminate = true

    Yalnız JS ile kurulur, HTML özniteliği yoktur. 'Tümünü seç' başlığında alt öğelerin bir kısmı seçiliyken kullanılır; görsel çizgi tek başına yetmez, aria-checked="mixed" de gerekir.

  • DOdaklı:focus-visible

    Klavyeyle gezilirken. Space tuşu işaretler; div ile taklit edilmiş kutuda bu davranış kendiliğinden gelmez.

  • EDevre dışıdisabled

    Seçilemez ve form gönderiminde YER ALMAZ. Bir onayın neden kapalı olduğunu yazmazsan kullanıcı arayüzün bozuk olduğunu düşünür.

KODDAKİ ADLARI
HTML<input type=checkbox> + <label>gerçek element + büyük tıklama alanı
JSel.indeterminate = truetümünü-seç ara durumu
ARIAaria-checked="mixed"ara durumu okuyucuya bildirir
HTML<fieldset> + <legend>ilişkili onayları gruplar
Güvenliksunucu tarafı doğrulamaclient aldatılabilir
ERİŞİLEBİLİRLİK & SIK HATA
  • Gerçek <input type="checkbox"> kullan. Div ve ikonla yapılmış taklit, klavye desteğini ve ekran okuyucu bildirimini sıfırdan yazmanı gerektirir — çoğu proje bunu eksik yazar.
  • Etiketi <label> ile bağla: metne tıklamak da kutuyu işaretler ve tıklama alanı on kat büyür. Küçük kareyi tutturmaya çalışmak özellikle dokunmatikte kullanılabilirlik sorunudur.
  • İlişkili onayları <fieldset> + <legend> ile grupla; ekran okuyucu her seçeneği sorunun bağlamıyla birlikte okur (WCAG 1.3.1).
  • Ara durumu yalnız görsel çizgiyle anlatma: aria-checked="mixed" olmadan ekran okuyucu 'kısmen seçili' diyemez, ya seçili ya değil der.
  • Zorunlu onayı SUNUCUDA da doğrula. Butonun disabled olması bir güvenlik önlemi değildir; tarayıcı araçlarıyla açılabilir.
SIK KARIŞTIRILANLAR

Anahtardan farkı. Ayrım görünüşte değil ZAMANLAMADA. Onay kutusu bir niyet bildirir ve etkisi form gönderilince doğar; anahtar ise dokunulduğu anda sistem durumunu değiştirir ve Kaydet butonu beklemez. Pratik test: kullanıcı bunu işaretledikten sonra 'Kaydet'e basacaksa onay kutusudur; basmayacaksa anahtar.

Anahtar sayfasına git →

Seçenek düğmesinden farkı. Onay kutuları BAĞIMSIZDIR: sıfır, bir ya da hepsi seçilebilir ve her biri tek başına geri alınabilir. Seçenek düğmeleri ise bir GRUP oluşturur ve gruptan yalnız biri seçilir. Kritik sonuç: bir seçenek düğmesini seçtikten sonra kod yazmadan 'hiçbiri' hâline dönemezsin; onay kutusunda ise kaldırmak tek tıktır.

Seçenek düğmesi sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Anahtar switch / toggleSeçenek düğmesi radioForm alanı form fieldEtiket chip / tag

AYNI AİLEDE · GIRDI