Bootstrap checkbox, radio, switch, select ve range kullanımı

Yaklaşım: input ve label kardeş öğelerdir

Bootstrap'in onay kutularında input etiketin içine konmaz; ikisi aynı .form-check içinde yan yana duran kardeş öğelerdir. Bu yüzden ikisini id ve for öznitelikleriyle bağlamanız gerekir. Belgeler bu tercihin nedenini açıklar: :checked ve :disabled gibi durumlar CSS'in kardeş seçicisi ~ ile etikete taşınır. Örneğin derlenmiş CSS'teki .form-check-input:disabled ~ .form-check-label kuralı devre dışı kutunun etiketini opacity: 0.5 ile soluklaştırır. Input etiketin içinde olsaydı bu seçici çalışmazdı.

Tarayıcının varsayılan kutusu da kullanılmaz. .form-check-input kuralı appearance: none ile yerel çizimi kapatır, kutuyu 1em genişlik ve yüksekliğe getirir, beyaz arka plan ve ince bir kenarlık verir. İşaretli olduğunda arka plan #0d6efd mavisine döner ve onay işareti bir SVG arka plan görseli olarak çizilir. Checkbox'ın köşeleri 0.25em, radyonun ise 50% yuvarlaktır; ikisini ayıran tek şey type özniteliğidir.

Checkbox ve radio

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="bulten">
  <label class="form-check-label" for="bulten">Bültene abone ol</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="kosullar" checked>
  <label class="form-check-label" for="kosullar">Kullanım koşullarını okudum</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="teslimat" id="kargo" checked>
  <label class="form-check-label" for="kargo">Kargo ile teslimat</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="teslimat" id="magaza">
  <label class="form-check-label" for="magaza">Mağazadan teslim al</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="teslimat" id="kurye" disabled>
  <label class="form-check-label" for="kurye">Kurye (şu an kapalı)</label>
</div>

Belgelerin ayrımı açıktır: checkbox bir listeden bir ya da birkaç seçenek seçmek, radio ise birçok seçenekten yalnızca birini seçmek içindir. Radyoların birbirini dışlaması Bootstrap'ten değil HTML'den gelir: aynı name değerini taşıyan radyolar bir grup oluşturur. name yazmayı unutursanız her radyo bağımsız davranır ve kullanıcı hepsini birden işaretleyebilir.

.form-check sarmalayıcısı padding-left: 1.5em bırakır, içindeki input ise float: left ve margin-left: -1.5em ile bu boşluğa yerleşir. Sonuç olarak etiket metni uzayıp alt satıra geçse bile kutunun sağında hizalı kalır. Sarmalayıcıların her biri min-height: 1.5rem ve küçük bir alt margin alır; art arda gelen form-check öğeleri belgelerin deyişiyle varsayılan olarak alt alta, uygun aralıkla dizilir.

Belirsiz (indeterminate) durum

Bir checkbox'ın "kısmen seçili" görünmesi için :indeterminate sözde sınıfı kullanılır. Bunun HTML'de bir özniteliği yoktur; belgelere göre bu durum yalnızca JavaScript ile elle ayarlanabilir. Ayarlandığında derlenmiş CSS kutuyu mavi yapar ve içine onay işareti yerine yatay bir çizgi çizer. Bu durum tipik olarak "tümünü seç" kutusunda, alt seçeneklerin bir kısmı işaretliyken kullanılır.

Switch: aç/kapa anahtarı

Switch'in HTML'i sıradan bir checkbox'tır; tek fark sarmalayıcıya eklenen .form-switch sınıfıdır. Derlenmiş CSS bu sınıfla input'u 2em genişliğe çıkarır, köşelerini border-radius: 2em ile tamamen yuvarlatır ve içine bir daire çizer. İşaretlendiğinde dairenin konumu background-position: right center ile sağa kayar, rengi beyaza döner. Sarmalayıcının sol boşluğu da genişleyen kutuya yer açmak için 2.5em olur.

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="bildirimEposta">
  <label class="form-check-label" for="bildirimEposta">Bildirim e-postaları</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="otomatikYedek" checked>
  <label class="form-check-label" for="otomatikYedek">Otomatik yedekleme</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="kilitliAyar" disabled>
  <label class="form-check-label" for="kilitliAyar">Yönetici tarafından kilitli</label>
</div>

Belgelere göre switch, özel checkbox'ın işaretlemesini kullanır; yani HTML açısından hâlâ bir onay kutusudur ve disabled özniteliğini de aynı şekilde destekler. Kaymanın 0.15 saniyelik geçişi, azaltılmış hareket tercih eden kullanıcılarda prefers-reduced-motion sorgusuyla kapatılır.

Satır içi dizilim ve etiketsiz kullanım

Seçenekleri yan yana göstermek için her .form-check öğesine .form-check-inline ekleyin. Bu sınıf display: inline-block ve margin-right: 1rem uygular; yani seçenekler aynı satırda, aralarında 1rem boşlukla durur ve sığmadıklarında doğal olarak alt satıra geçer.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="beden" id="bedenS" value="S">
  <label class="form-check-label" for="bedenS">S</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="beden" id="bedenM" value="M">
  <label class="form-check-label" for="bedenM">M</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="beden" id="bedenL" value="L" disabled>
  <label class="form-check-label" for="bedenL">L (tükendi)</label>
</div>

Etiket metni olmayan bir kutu gerekiyorsa, örneğin bir tablo satırını seçen kutu, belgeler .form-check sarmalayıcısını tamamen atlamanızı söyler. Sarmalayıcı yoksa input'un negatif sol margin'i ve float'ı da devreye girmez. Görünür metin olmasa da kutunun bir erişilebilir adı olmalıdır; bunun için aria-label kullanın. Ad verme yöntemlerinin tamamı erişilebilirlik yazısında anlatılıyor.

<div>
  <input class="form-check-input" type="checkbox" id="satirSec" value="" aria-label="Bu siparişi seç">
</div>

Buton görünümlü seçimler: btn-check

Checkbox veya radio'yu bir buton gibi göstermek için input'a .btn-check, etikete de .form-check-label yerine .btn ve bir renk sınıfı verirsiniz. Input yine etiketten önce gelir ve for ile bağlanır. Derlenmiş CSS .btn-check için position: absolute, clip: rect(0, 0, 0, 0) ve pointer-events: none uygular; yani asıl input görünmez olur ama sayfada kalır, tıklama etikete gider. .btn-check:checked + .btn-primary gibi kurallar işaretli durumda butonu basılı renge boyar.

<input type="checkbox" class="btn-check" id="hediyePaketi" autocomplete="off">
<label class="btn btn-outline-primary" for="hediyePaketi">Hediye paketi</label>

<input type="radio" class="btn-check" name="plan" id="planAylik" autocomplete="off" checked>
<label class="btn btn-outline-secondary" for="planAylik">Aylık</label>

<input type="radio" class="btn-check" name="plan" id="planYillik" autocomplete="off">
<label class="btn btn-outline-secondary" for="planYillik">Yıllık</label>

<input type="radio" class="btn-check" name="plan" id="planOmur" autocomplete="off" disabled>
<label class="btn btn-outline-secondary" for="planOmur">Ömür boyu</label>

Bu yapı v5'te değişti: buton görünümlü seçimler artık JavaScript gerektirmez ve bir sarmalayıcı öğeye ihtiyaç duymaz. Belgelerdeki örnekler autocomplete="off" özniteliğini de ekler. Devre dışı bir .btn-check, yanındaki butonu opacity: 0.65 ile soluklaştırır ve fare olaylarını keser. Bu butonları bir .btn-group içine alıp bitişik gösterebilirsiniz; grup ve araç çubuğu yapısı buton ve button group yazısında.

Select menüsü: form-select

Bootstrap 5'te açılır menü için .form-select sınıfı yeterlidir; v4'teki .custom-select bu adla yer değiştirdi. Belgelerin vurguladığı sınır şudur: özel stiller yalnızca select'in kapalıyken görünen ilk hâlini değiştirir, açılan listedeki <option> öğeleri tarayıcı kısıtlamaları yüzünden biçimlendirilemez. Yani liste açıldığında işletim sisteminin kendi menüsünü görürsünüz.

<select class="form-select" aria-label="Kargo firması seçimi">
  <option selected>Kargo firması seçin</option>
  <option value="1">Standart teslimat</option>
  <option value="2">Hızlı teslimat</option>
  <option value="3">Aynı gün teslimat</option>
</select>

<select class="form-select form-select-sm mt-3" aria-label="Küçük select örneği">
  <option selected>Küçük menü</option>
  <option value="1">Bir</option>
</select>

<select class="form-select mt-3" multiple aria-label="Çoklu seçim örneği">
  <option value="1">Kırmızı</option>
  <option value="2">Yeşil</option>
  <option value="3">Mavi</option>
</select>

Derlenmiş CSS select'e .form-control ile aynı yazı boyutunu, kenarlığı ve odak halkasını verir, ek olarak sağ tarafa bir ok simgesi çizer: simge background-image olarak eklenir, right 0.75rem center konumuna yerleşir ve metnin simgenin altına girmemesi için sağ iç boşluk 2.25rem olur. .form-select-lg ve .form-select-sm dikey boşluğu ve yazı boyutunu metin alanlarının büyük ve küçük boyutlarıyla uyumlu hâle getirir.

multiple ve size öznitelikleri de desteklenir. İkisinde de select bir liste kutusuna dönüştüğü için CSS ok simgesini kaldırır: .form-select[multiple] ve .form-select[size]:not([size="1"]) kuralı background-image: none ve padding-right: 0.75rem uygular. disabled özniteliği menüyü griye çevirir (#e9ecef) ve fare etkileşimini keser. Select'i bir "Seçenekler" etiketi ya da butonla birleştirmek için input group, üstte yüzen etiketle göstermek için aynı yazının floating label bölümüne bakın.

Range: kaydırıcı

<input type="range"> öğesine .form-range verdiğinizde hem iz (arka plandaki çubuk) hem de tutamaç (değeri gösteren yuvarlak) tarayıcılar arasında aynı görünecek şekilde biçimlenir. Derlenmiş CSS'e göre iz 0.5rem yüksekliğinde #dee2e6 renginde, tutamaç 1rem çapında #0d6efd mavisindedir; tutamaç sürüklenirken açık maviye döner, devre dışı alanda griye geçer.

<label for="sesSeviyesi" class="form-label">Ses seviyesi</label>
<input type="range" class="form-range" id="sesSeviyesi">

<label for="puan" class="form-label">Puanınız (0 ile 5 arası, yarım adımlarla)</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="puan">

<label for="kapaliAyar" class="form-label">Kilitli ayar</label>
<input type="range" class="form-range" id="kapaliAyar" disabled>

Range'in varsayılan alt ve üst sınırı belgelere göre sırasıyla 0 ve 100'dür; min ve max öznitelikleriyle değiştirirsiniz. Değer varsayılan olarak tam sayılara oturur, step="0.5" gibi bir adım değeriyle ara değerlere izin verirsiniz. Bir sınır da var: tutamacın solundaki izi doldurarak ilerleme hissi vermek yalnızca Firefox'ta mümkün olduğu için Bootstrap 5.0 bu dolgu görünümünü desteklemez. Bootstrap 5.0 belgelerinde kaydırıcının seçili değerini rakamla gösteren bir sınıf ya da bileşen de yoktur.

Mini örnek: bildirim ayarları formu

Şimdi parçaları bir araya getirelim. Aşağıdaki form bir kullanıcı panelindeki bildirim ayarlarını temsil ediyor: iki switch ile kanallar açılıp kapatılıyor, bir radyo grubuyla sıklık seçiliyor, select ile dil, range ile de günlük bildirim üst sınırı belirleniyor. Radyo grubu bir <fieldset> içinde ve grubun başlığı <legend> ile verilmiş; Reboot fieldset'in kenarlığını kaldırdığı için bu sarmalayıcı görsel bir iz bırakmaz; Reboot ayrıca legend öğesini küçük bir başlık gibi biçimlendirir, böylece radyoların ortak sorusu hem görünür hem de HTML yapısında açıkça yazılı olur.

<form>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="kanalEposta" checked>
    <label class="form-check-label" for="kanalEposta">E-posta bildirimleri</label>
  </div>
  <div class="form-check form-switch mb-3">
    <input class="form-check-input" type="checkbox" id="kanalSms">
    <label class="form-check-label" for="kanalSms">SMS bildirimleri</label>
  </div>
  <fieldset class="mb-3">
    <legend class="fs-6">Özet sıklığı</legend>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="siklik" id="siklikGun" value="gun" checked>
      <label class="form-check-label" for="siklikGun">Günlük</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="siklik" id="siklikHafta" value="hafta">
      <label class="form-check-label" for="siklikHafta">Haftalık</label>
    </div>
  </fieldset>
  <div class="mb-3">
    <label for="bildirimDili" class="form-label">Bildirim dili</label>
    <select class="form-select" id="bildirimDili">
      <option value="tr" selected>Türkçe</option>
      <option value="en">İngilizce</option>
    </select>
  </div>
  <div class="mb-3">
    <label for="ustSinir" class="form-label">Günlük en fazla bildirim</label>
    <input type="range" class="form-range" min="1" max="10" id="ustSinir">
  </div>
  <button type="submit" class="btn btn-primary">Ayarları kaydet</button>
</form>

Örnekte her kontrolün görünür bir etiketi olduğu için ek aria-label gerekmedi; select ve range de .form-label ile bağlandı. legend öğesine verilen .fs-6 bir yazı boyutu yardımcı sınıfıdır ve başlığı etiketlerle aynı ölçeğe çeker; bu tür sınıflar text yardımcı sınıfları yazısında. İki switch'in aralığı .form-check sarmalayıcısının küçük alt margin'inden gelir, grubun sonundaki .mb-3 ise sonraki bölümle arasını açar. Bu formu yatay düzene çevirmek isterseniz etiketleri .col-form-label ile sütunlara alabilirsiniz. Gerçek bir projede formu sunucuya göndermeden önce zorunlu alanları denetlemek de isteyeceksiniz; checkbox, radio ve select doğrulama stillerini destekler, nasıl bağlanacakları form doğrulama yazısında adım adım anlatılıyor.

Hangi kontrolü ne zaman seçmeli?

Bootstrap 4'ten taşınan bir projede sınıf adlarını değiştirmeyi unutmayın: .custom-check artık .form-check, .custom-switch artık .form-check.form-switch, .custom-select artık .form-select, .custom-range da .form-range oldu; .form-control-range kaldırıldı. Ayrıntılar Bootstrap 4'ten 5'e geçiş yazısında.

Sass değişkenleri

Bu kontrollerin renkleri ve ölçüleri _variables.scss içindeki $form-check-*, $form-switch-*, $form-select-* ve $form-range-* değişkenlerinden gelir. Örneğin $form-check-input-width varsayılan olarak 1em, $form-check-inline-margin-end 1rem, $form-switch-width 2em, $form-range-track-height .5rem, $form-range-thumb-width ise 1rem değerindedir. İşaretli kutunun rengi $form-check-input-checked-bg-color üzerinden $component-active-bg değerine bağlıdır, bu yüzden ana tema rengini değiştirdiğinizde kutular, switch'ler ve kaydırıcı tutamacı birlikte değişir. Değişkenleri nasıl ezeceğiniz Sass ile özelleştirme yazısında.

Sık yapılan hatalar

• Input'u etiketin içine koymak: Bootstrap'in durum stilleri kardeş seçiciye dayanır; input etiketin içindeyse disabled ve doğrulama renkleri etikete geçmez.
• id ve for eşleşmemesi: Etiket tıklanınca kutu işaretlenmez; btn-check yapısında ise butona tıklamak hiçbir şey yapmaz.
• Radyolarda name unutmak: Aynı grubun radyoları aynı name değerini taşımazsa birbirini dışlamaz.
• Option'ları biçimlendirmeye çalışmak: .form-select yalnızca kapalı menüyü biçimlendirir; açılan liste tarayıcıya aittir.
• Etiketsiz kutuya ad vermemek: Görünür metin yoksa aria-label zorunlu hâle gelir.
• Switch'i farklı bir öğe sanmak: .form-switch bir checkbox'tır; HTML'i, disabled desteği ve doğrulama stilleri checkbox ile aynıdır.

Sık Sorulan Sorular

Bootstrap 5 checkbox stilini nasıl değiştiririm?

Sass ile derliyorsanız $form-check-* değişkenlerini ezin; derlenmiş CSS kullanıyorsanız kendi kurallarınızı Bootstrap'ten sonra yükleyin. Renk büyük ölçüde $component-active-bg değerinden gelir.

Switch için JavaScript gerekir mi?

Hayır. Switch, .form-switch sınıfı eklenmiş bir checkbox'tır ve tamamen CSS ile çalışır. Buton görünümlü .btn-check seçimleri de v5'te JavaScript istemez.

Select menüsündeki seçenekleri renklendirebilir miyim?

Bootstrap 5.0 bunu desteklemez; belgelere göre özel stiller tarayıcı kısıtlamaları yüzünden <option> öğelerine uygulanamaz.

Range kaydırıcısı seçilen değeri gösterir mi?

Hayır, .form-range yalnızca iz ve tutamacı biçimlendirir. İz dolgusu da desteklenmez ve seçili değeri yazıyla gösteren bir sınıf belgelenmemiştir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Form control · Input group ve floating label · Buton ve button group · Form doğrulama · Erişilebilirlik