in English

Cek dan radio

Buat kotak centang dan radio lintas-browser dan lintas-perangkat yang konsisten dengan komponen pemeriksaan kami yang sepenuhnya ditulis ulang.

Di halaman ini

Mendekati

Kotak centang dan radio default browser diganti dengan bantuan .form-check, serangkaian kelas untuk kedua jenis input yang meningkatkan tata letak dan perilaku elemen HTML mereka, yang memberikan penyesuaian yang lebih besar dan konsistensi lintas browser. Kotak centang adalah untuk memilih satu atau beberapa opsi dalam daftar, sedangkan radio untuk memilih satu opsi dari banyak opsi.

Secara struktural, <input>s dan <label>s kami adalah elemen saudara yang bertentangan dengan an <input>di dalam a <label>. Ini sedikit lebih bertele-tele karena Anda harus menentukan iddan foratribut untuk menghubungkan <input>dan <label>. Kami menggunakan pemilih saudara ( ~) untuk semua <input>status kami, seperti :checkedatau :disabled. Saat digabungkan dengan .form-check-labelkelas, kita dapat dengan mudah menata teks untuk setiap item berdasarkan status <input>'.

Pemeriksaan kami menggunakan ikon Bootstrap khusus untuk menunjukkan status yang dicentang atau tidak ditentukan.

Cek

Kotak centang default

Kotak centang yang dicentang

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>

tak tentu

Kotak centang dapat menggunakan :indeterminatekelas semu ketika diatur secara manual melalui JavaScript (tidak ada atribut HTML yang tersedia untuk menentukannya).

Kotak centang tak tentu

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>

Dengan disabilitas

Tambahkan disabledatribut dan <label>s terkait secara otomatis ditata agar sesuai dengan warna yang lebih terang untuk membantu menunjukkan status input.

Dinonaktifkan kotak centang tak tentu

Kotak centang dinonaktifkan

Dinonaktifkan kotak centang yang dicentang

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>

Radio

Radio bawaan

Radio yang dicentang default

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>

Dengan disabilitas

Tambahkan disabledatribut dan <label>s terkait secara otomatis ditata agar sesuai dengan warna yang lebih terang untuk membantu menunjukkan status input.

Radio yang dinonaktifkan

Radio yang diperiksa dinonaktifkan

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>

Sakelar

Sakelar memiliki markup kotak centang khusus tetapi menggunakan .form-switchkelas untuk merender sakelar sakelar. Pertimbangkan untuk menggunakan role="switch"untuk menyampaikan sifat kontrol secara lebih akurat ke teknologi bantu yang mendukung peran ini. Dalam teknologi bantu yang lebih lama, itu hanya akan diumumkan sebagai kotak centang biasa sebagai cadangan. Switch juga mendukung disabledatribut.

Masukan kotak centang sakelar default

Input kotak centang sakelar yang dicentang

Input kotak centang sakelar dinonaktifkan

Input kotak centang sakelar yang dicentang dinonaktifkan

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>

Default (bertumpuk)

Secara default, sejumlah kotak centang dan radio yang merupakan saudara langsung akan ditumpuk secara vertikal dan diberi spasi yang sesuai dengan .form-check.

Kotak centang default

Kotak centang dinonaktifkan

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>

Radio bawaan

Radio default kedua

Radio yang dinonaktifkan

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>

Di barisan

Kelompokkan kotak centang atau radio pada baris horizontal yang sama dengan menambahkan .form-check-inlineke sembarang .form-check.

3 (dinonaktifkan)

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 (dinonaktifkan)

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>

Membalik

Letakkan kotak centang, radio, dan sakelar Anda di sisi yang berlawanan dengan .form-check-reversekelas pengubah.

Kotak centang terbalik

Kotak centang terbalik yang dinonaktifkan

Masukan kotak centang sakelar terbalik

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>

Tanpa label

Abaikan pembungkus .form-checkuntuk kotak centang dan radio yang tidak memiliki teks label. Ingatlah untuk tetap memberikan beberapa bentuk nama yang dapat diakses untuk teknologi bantu (misalnya, menggunakan aria-label). Lihat bagian aksesibilitas ikhtisar formulir untuk detailnya.

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>

Beralih tombol

Buat kotak centang seperti tombol dan tombol radio dengan menggunakan .btngaya daripada .form-check-labelpada <label>elemen. Tombol sakelar ini selanjutnya dapat dikelompokkan dalam grup tombol jika diperlukan.

Tombol sakelar kotak centang

Beralih tunggal

html

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

Diperiksa

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>

Dengan disabilitas

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>

Secara visual, tombol sakelar kotak centang ini identik dengan tombol sakelar plugin tombol . Namun, mereka disampaikan secara berbeda oleh teknologi bantu: sakelar kotak centang akan diumumkan oleh pembaca layar sebagai "dicentang"/"tidak dicentang" (karena, terlepas dari penampilannya, mereka pada dasarnya masih kotak centang), sedangkan tombol sakelar plugin tombol akan diumumkan sebagai "tombol"/"tombol ditekan". Pilihan antara dua pendekatan ini akan bergantung pada jenis sakelar yang Anda buat, dan apakah sakelar itu masuk akal atau tidak bagi pengguna saat diumumkan sebagai kotak centang atau sebagai tombol sebenarnya.

Tombol sakelar radio

Diperiksa Radio Dengan disabilitas Radio

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>

Gaya yang diuraikan

Varian yang berbeda dari .btn, seperti pada berbagai gaya yang diuraikan, didukung.

Beralih tunggal
Diperiksa
Memeriksa radio sukses radio bahaya

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>

Kelancangan

Variabel

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