Kontroller ve radyolar

Tamamen yeniden yazılmış kontroller bileşenimizle tutarlı tarayıcılar arası ve cihazlar arası onay kutuları ve radyolar oluşturun.

Bu sayfada

Yaklaşmak

.form-checkTarayıcı varsayılan onay kutuları ve radyolar , HTML öğelerinin düzenini ve davranışını iyileştiren, daha fazla özelleştirme ve tarayıcılar arası tutarlılık sağlayan her iki giriş türü için bir dizi sınıf yardımıyla değiştirilir . Onay kutuları bir listedeki bir veya birkaç seçeneği seçmek içindir, radyolar ise birçok seçenek arasından birini seçmek içindir.

Yapısal olarak, <input>s ve s öğelerimiz, a içindeki bir <label>öğenin aksine kardeş öğelerdir . Bu biraz daha ayrıntılıdır, çünkü belirtmeniz gerekir ve ve ile ilişkilendirmek için nitelikler . veya gibi tüm durumlarımız için kardeş seçiciyi ( ) kullanırız . Sınıfla birleştirildiğinde , ' durumuna göre her bir öğe için metni kolayca biçimlendirebiliriz .<input><label>idfor<input><label>~<input>:checked:disabled.form-check-label<input>

Kontrollerimiz, kontrol edilen veya belirsiz durumları belirtmek için özel Bootstrap simgeleri kullanır.

Çekler

Varsayılan onay kutusu

İşaretli onay kutusu

html

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

belirsiz

:indeterminateOnay kutuları, JavaScript aracılığıyla manuel olarak ayarlandığında sözde sınıfı kullanabilir (bunu belirtmek için kullanılabilir HTML özniteliği yoktur).

belirsiz onay kutusu

html

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
  <label class="form-check-label" for="flexCheckIndeterminate">
    Indeterminate checkbox
  </label>
</div>

Engelli

Özniteliği ekleyin disabledve ilişkili <label>s'ler, girişin durumunu belirtmeye yardımcı olmak için daha açık bir renkle eşleşecek şekilde otomatik olarak stillendirilir.

Devre dışı belirsiz onay kutusu

Devre dışı onay kutusu

Devre dışı işaretli onay kutusu

html

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
  <label class="form-check-label" for="flexCheckIndeterminateDisabled">
    Disabled indeterminate checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
  <label class="form-check-label" for="flexCheckDisabled">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexCheckCheckedDisabled">
    Disabled checked checkbox
  </label>
</div>

radyolar

Varsayılan radyo

Varsayılan işaretli radyo

html

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

Engelli

Özniteliği ekleyin disabledve ilişkili <label>s'ler, girişin durumunu belirtmeye yardımcı olmak için daha açık bir renkle eşleşecek şekilde otomatik olarak stillendirilir.

engelli radyo

Devre dışı işaretli radyo

html

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
  <label class="form-check-label" for="flexRadioDisabled">
    Disabled radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexRadioCheckedDisabled">
    Disabled checked radio
  </label>
</div>

Anahtarlar

Bir anahtar, özel bir onay kutusunun işaretlemesine sahiptir, ancak .form-switchbir geçiş anahtarı oluşturmak için sınıfı kullanır. role="switch"Kontrolün doğasını bu rolü destekleyen yardımcı teknolojilere daha doğru bir şekilde iletmek için kullanmayı düşünün . Daha eski yardımcı teknolojilerde, geri dönüş olarak normal bir onay kutusu olarak duyurulacaktır. Anahtarlar da disabledözelliği destekler.

Varsayılan anahtar onay kutusu girişi

İşaretli anahtar onay kutusu girişi

Devre dışı anahtarı onay kutusu girişi

Devre dışı işaretli anahtar onay kutusu girişi

html

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Varsayılan (yığılmış)

Varsayılan olarak, hemen kardeş olan herhangi bir sayıda onay kutusu ve telsiz dikey olarak yığılır ve ile uygun şekilde aralıklanır .form-check.

Varsayılan onay kutusu

Devre dışı onay kutusu

html

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

Varsayılan radyo

İkinci varsayılan radyo

engelli radyo

html

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Çizgide

.form-check-inlineHerhangi birine ekleyerek onay kutularını veya radyoları aynı yatay satırda gruplayın .form-check.

3 (devre dışı)

html

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

3 (devre dışı)

html

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Tersi

.form-check-reverseOnay kutularınızı, radyolarınızı ve anahtarlarınızı değiştirici sınıfla karşı tarafa koyun .

Ters onay kutusu

Devre dışı ters onay kutusu

Ters anahtar onay kutusu girişi

html

<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
  <label class="form-check-label" for="reverseCheck1">
    Reverse checkbox
  </label>
</div>
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
  <label class="form-check-label" for="reverseCheck2">
    Disabled reverse checkbox
  </label>
</div>

<div class="form-check form-switch form-check-reverse">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
  <label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
</div>

etiketsiz

.form-checkEtiket metni olmayan onay kutuları ve radyolar için sarmalamayı atlayın . Yardımcı teknolojiler için bir tür erişilebilir ad sağlamayı unutmayın (örneğin, kullanarak aria-label). Ayrıntılar için formlara genel bakış erişilebilirlik bölümüne bakın.

html

<div>
  <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

<div>
  <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
</div>

Geçiş düğmeleri

Öğeler .btnyerine stilleri kullanarak düğme benzeri onay kutuları ve radyo düğmeleri oluşturun .form-check-label. <label>Bu geçiş düğmeleri ayrıca gerekirse bir düğme grubunda gruplandırılabilir.

Onay kutusu geçiş düğmeleri

Tek geçiş

html

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>

Kontrol

html

<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>

Engelli

html

<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>

Görsel olarak, bu onay kutusu geçiş düğmeleri, düğme eklentisi geçiş düğmeleriyle aynıdır . Bununla birlikte, yardımcı teknolojiler tarafından farklı şekilde iletilirler: onay kutusu geçişleri ekran okuyucular tarafından "işaretli"/"işaretli değil" olarak duyurulur (çünkü görünümlerine rağmen temelde hala onay kutularıdır), oysa düğme eklentisi geçiş düğmeleri “düğme”/ “düğmeye basıldı” olarak duyurulur. Bu iki yaklaşım arasındaki seçim, oluşturduğunuz geçiş türüne ve geçişin bir onay kutusu veya gerçek bir düğme olarak duyurulduğunda kullanıcılar için anlamlı olup olmayacağına bağlı olacaktır.

Radyo geçiş düğmeleri

Kontrol Radyo Engelli Radyo

html

<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>

<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-secondary" for="option2">Radio</label>

<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
<label class="btn btn-secondary" for="option3">Disabled</label>

<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-secondary" for="option4">Radio</label>

Seviyelendirilmiş stiller

.btnAna hatlarıyla belirtilen çeşitli stiller gibi farklı varyantları desteklenir.

Tek geçiş
Kontrol
Kontrol edilen başarı radyosu Tehlike radyosu

html

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>

<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>

<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>

<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>

küstah

Değişkenler

$form-check-input-width:                  1em;
$form-check-min-height:                   $font-size-base * $line-height-base;
$form-check-padding-start:                $form-check-input-width + .5em;
$form-check-margin-bottom:                .125rem;
$form-check-label-color:                  null;
$form-check-label-cursor:                 null;
$form-check-transition:                   null;

$form-check-input-active-filter:          brightness(90%);

$form-check-input-bg:                     $input-bg;
$form-check-input-border:                 1px solid rgba($black, .25);
$form-check-input-border-radius:          .25em;
$form-check-radio-border-radius:          50%;
$form-check-input-focus-border:           $input-focus-border-color;
$form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow;

$form-check-input-checked-color:          $component-active-color;
$form-check-input-checked-bg-color:       $component-active-bg;
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color;
$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");

$form-check-input-indeterminate-color:          $component-active-color;
$form-check-input-indeterminate-bg-color:       $component-active-bg;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color;
$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");

$form-check-input-disabled-opacity:        .5;
$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity;
$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity;

$form-check-inline-margin-end:    1rem;