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

← UI Sözlüğü

Seçenek düğmesi radio

bilinen diğer adları radio button · radyo düğmesi · tek seçim düğmesi

Böyle diyorsan: "tek seçilebilen yuvarlaklar" · "şıklardan birini seçme" → bunun adı seçenek düğmesi.

Gruptan yalnız BİR seçim yaptıran yuvarlak düğme.

Seçenek düğmesi, bir sorunun birbirini dışlayan cevaplarını listeler: gruptan her an yalnız biri seçilidir. Grubu oluşturan şey görsel yakınlık değil, düğmelerin AYNI name değerini paylaşmasıdır; name'ler ayrıştığı anda hepsi bağımsız onay kutusuna döner ve üçü birden seçilebilir hâle gelir. En çok atlanan davranışsal sonucu şudur: bir seçeneği seçtikten sonra, kod yazmadan 'hiçbirini seçmemiş' hâline DÖNEMEZSİN. Bu yüzden vazgeçilebilmesi gereken sorularda listeye açıkça bir 'Hiçbiri' seçeneği koymak gerekir.

Kapsam: Bu madde gruptan tek seçimi kapsar. Bağımsız çoklu seçim Onay Kutusu, çok sayıda seçenek arasından tek seçim ise Seçim Kutusu maddesindedir — üçü aynı soruyu farklı ölçeklerde çözer.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
Ödeme yöntemi
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Ödeme yöntemi grubu ekle: fieldset+legend içinde 3 radio (Kart varsayılan seçili, Havale, Kapıda +₺15 açıklamalı); hepsi AYNI name'i paylaşsın; etiket ve açıklama tıklanabilir olsun; klavye ok tuşları grup içinde gezdirsin; seçim değişince toplam tutar anında güncellensin.
DEBUG PROMPTU — HUYSUZLANIRSA

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

Radio grubum huysuz; klasikleri sırayla ele: (1) name'ler farklı yazılmış — üç seçenek de aynı anda seçilebiliyor; (2) fieldset/legend yok, ekran okuyucu seçeneklerin hangi soruya ait olduğunu bilmiyor; (3) varsayılan seçili de yok doğrulama da yok — boş değer gidiyor; (4) yalnız minik yuvarlak tıklanabilir (label bağsız); (5) görsel kart tasarımına çevrilmiş ama içindeki gerçek radio kaldırılmış — klavye ölmüş. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Grup çerçevesifieldset + legend

    Sorunun kendisi ('Ödeme yöntemi') legend'dir; seçenekler onun altında tek ailedir.

  • 2Düğmelertype=radio name=X

    AYNI name'i paylaşan yuvarlaklar — name farklıysa hepsi aynı anda seçilebilir (klasik felaket).

  • 3Seçili durumchecked

    Gruptan her an en çok bir seçili; makul bir varsayılan seçili gelmeli ya da doğrulama istenmeli.

  • 4Açıklama satırıyan metin

    Her seçeneğin küçük yan bilgisi ('+₺15 hizmet bedeli') — kararı hızlandırır.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • AHiçbiri seçili değilbaşlangıç

    Grup boş başlayabilir ama bu hâle bir daha DÖNÜLEMEZ. Ya makul bir varsayılan seçili gelmeli ya da gönderimde doğrulama istenmeli.

  • BSeçilichecked

    Gruptan tam bir tanesi. Başka birini seçmek öncekini kendiliğinden bırakır; ayrıca kaldırma diye bir işlem yoktur.

  • CGrup odağıroving tabindex

    Tab tuşu grubun tamamına BİR kez uğrar, seçenekler arasında ok tuşlarıyla gezilir. Her seçeneği ayrı Tab durağı yaparsan uzun formlar klavyeyle işkenceye döner.

  • DDevre dışıdisabled

    Tek seçenek ya da grubun tamamı kapatılabilir. Bir seçeneğin neden kapalı olduğu yazılmazsa kullanıcı seçim yapamamayı hata sanır.

KODDAKİ ADLARI
HTMLfieldset + legendgrup anlamı
HTMLinput type=radio name=ortaktek-seçim garantisi
KlavyeTab grup içine, oklar seçenekler arasıyerleşik davranış
UXvarsayılan seçili + yan açıklamahızlı karar
ERİŞİLEBİLİRLİK & SIK HATA
  • Grubu <fieldset> + <legend> ile sar. Sorunun kendisi legend'dir; bu olmadan ekran okuyucu 'Kart' der ama neyin kartı olduğunu söyleyemez (WCAG 1.3.1).
  • Bütün seçenekler AYNI name'i paylaşmalı. Farklı name, tek-seçim garantisini sessizce kaldırır — kod hata vermez, sadece yanlış çalışır.
  • Klavye davranışına dokunma: Tab grubun içine girer, oklar seçenekler arasında gezer ve gezerken seçer. Yerleşik radyoyu kullanırsan bu bedava gelir.
  • Etiketi ve yan açıklamayı da tıklanabilir yap; yalnız minik yuvarlağı hedef bırakmak dokunmatikte başarısızlık üretir.
  • Kartlaştırılmış tasarımlarda içerideki gerçek radio'yu kaldırma. Görsel kart güzel olabilir ama altında yerleşik element durmuyorsa klavye ve okuyucu desteği ölür.
SIK KARIŞTIRILANLAR

Onay kutusundan farkı. Seçenek düğmeleri bir GRUP oluşturur ve gruptan yalnız biri seçilir; onay kutuları BAĞIMSIZDIR ve hepsi aynı anda seçilebilir. Ayrımı belirleyen soru şudur: cevaplar birbirini dışlıyor mu? Dışlıyorsa seçenek düğmesi, dışlamıyorsa onay kutusu. Bir de geri alınabilirlik farkı vardır: onay kutusunu kaldırabilirsin, seçenek düğmesini yalnız başka birini seçerek değiştirebilirsin.

Onay kutusu sayfasına git →

Seçim kutusundan farkı. İkisi de gruptan tek seçim yaptırır; ayrım GÖRÜNÜRLÜKTE ve ölçekte. Seçenek düğmeleri bütün seçenekleri aynı anda gösterir — kullanıcı karşılaştırarak seçer; seçim kutusu ise onları bir listeye saklar. Pratik kural: yaklaşık beşe kadar seçenekte ve seçenekler karşılaştırılacaksa seçenek düğmesi, uzun ve tanıdık listelerde (ülke, il) seçim kutusu.

Seçim kutusu sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Onay kutusu checkboxSeçim kutusu selectAnahtar switch / toggleForm alanı form field

AYNI AİLEDE · GIRDI