Cek dan radio

Cipta kotak semak dan radio silang penyemak imbas dan silang peranti yang konsisten dengan komponen semakan kami yang ditulis semula sepenuhnya.

Pada halaman ini

Pendekatan

Kotak semak dan radio lalai penyemak imbas digantikan dengan bantuan .form-check, satu siri kelas untuk kedua-dua jenis input yang meningkatkan reka letak dan gelagat elemen HTML mereka, yang memberikan penyesuaian yang lebih besar dan konsistensi silang penyemak imbas. Kotak semak adalah untuk memilih satu atau beberapa pilihan dalam senarai, manakala radio adalah untuk memilih satu pilihan daripada banyak.

Dari segi struktur, <input>s dan <label>s kami adalah elemen adik beradik berbanding dengan <input>dalam a <label>. Ini lebih bertele-tele kerana anda mesti menentukan iddan foratribut untuk mengaitkan <input>dan <label>. Kami menggunakan pemilih adik beradik ( ~) untuk semua <input>negeri kami, seperti :checkedatau :disabled. Apabila digabungkan dengan .form-check-labelkelas, kita boleh menggayakan teks dengan mudah untuk setiap item berdasarkan keadaan <input>'.

Semakan kami menggunakan ikon Bootstrap tersuai untuk menunjukkan keadaan bertanda atau tidak tentu.

Cek

Kotak semak lalai

Kotak semak ditandai

<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>

Tak tentu hala

Kotak semak boleh menggunakan :indeterminatekelas pseudo apabila ditetapkan secara manual melalui JavaScript (tiada atribut HTML tersedia untuk menentukannya).

Kotak semak tidak tentu

<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>

Dilumpuhkan

Tambahkan disabledatribut dan <label>s yang berkaitan digayakan secara automatik untuk dipadankan dengan warna yang lebih cerah untuk membantu menunjukkan keadaan input.

Kotak pilihan dilumpuhkan

Kotak semak dilumpuhkan

<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>

Radio

Radio lalai

Radio disemak lalai

<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>

Dilumpuhkan

Tambahkan disabledatribut dan <label>s yang berkaitan digayakan secara automatik untuk dipadankan dengan warna yang lebih cerah untuk membantu menunjukkan keadaan input.

Radio dilumpuhkan

Radio yang diperiksa dilumpuhkan

<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>

Suis

Suis mempunyai penanda kotak semak tersuai tetapi menggunakan .form-switchkelas untuk menghasilkan suis togol. Suis juga menyokong disabledatribut.

Input kotak semak suis lalai

Input kotak semak suis telah diperiksa

Input kotak semak suis dilumpuhkan

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" 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" 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" 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" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Lalai (bertindan)

Secara lalai, sebarang bilangan kotak pilihan dan radio yang merupakan saudara terdekat akan disusun secara menegak dan dijarakkan dengan .form-check.

Kotak semak lalai

Kotak pilihan dilumpuhkan

<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>

Radio lalai

Radio lalai kedua

Radio dilumpuhkan

<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>

Dalam barisan

Kumpulan kotak semak atau radio pada baris mendatar yang sama dengan menambah .form-check-inlinepada mana-mana .form-check.

3 (kurang upaya)

<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 (kurang upaya)

<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>

Tanpa label

Abaikan pembalut .form-checkuntuk kotak pilihan dan radio yang tidak mempunyai teks label. Ingat untuk tetap memberikan beberapa bentuk nama yang boleh diakses untuk teknologi bantuan (contohnya, menggunakan aria-label). Lihat bahagian kebolehcapaian gambaran keseluruhan borang untuk mendapatkan butiran.

<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>

Togol butang

Buat kotak semak seperti butang dan butang radio dengan menggunakan .btngaya dan bukannya .form-check-labelpada <label>elemen. Butang togol ini boleh dikumpulkan lagi dalam kumpulan butang jika perlu.

Butang togol kotak semak

Togol tunggal

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

Disemak

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

Dilumpuhkan

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

Secara visual, butang togol kotak semak ini adalah sama dengan butang togol pemalam butang . Walau bagaimanapun, ia disampaikan secara berbeza oleh teknologi bantuan: togol kotak pilihan akan diumumkan oleh pembaca skrin sebagai "ditandai"/"tidak ditanda" (kerana, walaupun penampilannya, ia pada asasnya masih kotak pilihan), manakala butang togol pemalam butang akan menjadi diumumkan sebagai “butang”/“butang ditekan”. Pilihan antara kedua-dua pendekatan ini bergantung pada jenis togol yang anda buat dan sama ada togol itu akan masuk akal kepada pengguna apabila diumumkan sebagai kotak semak atau sebagai butang sebenar atau tidak.

Butang togol radio

Disemak Radio Dilumpuhkan Radio

<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>

Gaya yang digariskan

Varian berbeza .btn, seperti pada pelbagai gaya yang digariskan, disokong.

Togol tunggal
Disemak
Radio kejayaan diperiksa Radio bahaya

<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>

Sass

Pembolehubah

$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 10l3 3l6-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;