in English

Priksa lan radio

Gawe kothak centhang lan radio lintas-browser lan lintas-piranti kanthi konsisten karo komponen mriksa sing wis ditulis maneh.

Ing kaca iki

pendekatan

kothak centhang standar browser lan radio diganti karo bantuan saka .form-check, seri saka kelas kanggo loro jinis input sing mbenakake tata letak lan prilaku unsur HTML sing, sing nyedhiyani kustomisasi luwih lan salib browser konsistensi. Kothak centhang kanggo milih siji utawa sawetara opsi ing dhaptar, dene radio kanggo milih siji opsi saka akeh.

Sacara struktural, <input>s lan <label>s kita minangka unsur sedulur minangka lawan saka <input>ing a <label>. Iki rada luwih verbose amarga sampeyan kudu nemtokake idlan foratribut kanggo nggandhengake <input>lan <label>. Kita nggunakake pamilih sedulur ( ~) kanggo kabeh <input>negara kita, kaya :checkedutawa :disabled. Nalika digabungake karo .form-check-labelkelas, kita bisa gampang gaya teks kanggo saben item adhedhasar <input>'s negara.

Pemriksaan kita nggunakake lambang Bootstrap khusus kanggo nuduhake negara sing dicenthang utawa ora ditemtokake.

Priksa

Kothak gawan

kothak centhang

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>

Ora mesthi

Kothak centhang bisa nggunakake :indeterminatekelas pseudo nalika disetel kanthi manual liwat JavaScript (ora ana atribut HTML sing kasedhiya kanggo nemtokake).

Kothak sing ora ditemtokake

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>

dipatèni

Nambah disabledatribut lan <label>s sing digandhengake kanthi otomatis dicocogake karo werna sing luwih entheng kanggo mbantu nuduhake status input.

Kothak centhang ora ditemtokake

kothak centhang dipatèni

Dicenthang kothak dipatèni

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>

Radios

Radio standar

Radio sing dicenthang standar

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>

dipatèni

Nambah disabledatribut lan <label>s sing digandhengake kanthi otomatis dicocogake karo werna sing luwih entheng kanggo mbantu nuduhake status input.

radio dipatèni

Radio sing dicenthang dipatèni

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>

Ngalih

Saklar nduweni tandha kothak centhang khusus nanging nggunakake .form-switchkelas kasebut kanggo nggawe saklar pilihan. Coba gunakake role="switch"kanggo ngirim sifat kontrol kanthi luwih akurat menyang teknologi bantu sing ndhukung peran iki. Ing teknologi bantu lawas, mung bakal diumumake minangka kothak centhang biasa minangka mundur. Ngalih uga ndhukung disabledatribut.

Input kothak centhang switch standar

Input kothak centhang switch dicenthang

Input kothak centhang switch dipateni

Input kothak centhang switch sing dicenthang dipateni

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

Kanthi gawan, sawetara kothak centhang lan radio sing dadi sedulur langsung bakal ditumpuk vertikal lan diwenehi jarak kanthi .form-check.

Kothak gawan

kothak centhang dipatèni

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 standar

Radio standar kapindho

radio dipatèni

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>

Inline

Klompok kothak centhang utawa radio ing baris horisontal sing padha kanthi nambahake .form-check-inline..form-check

3 (cacat)

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

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>

mbalikke

Sijine kothak centhang, radio, lan ngalih ing sisih ngelawan karo .form-check-reversekelas modifier.

kothak mbalikke

Kothak mbalikke dipateni

Ganti kothak centhang input

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

Ngilangi bungkus .form-checkkanggo kothak centhang lan radio sing ora ana teks label. Elinga yen isih menehi sawetara wangun jeneng sing bisa diakses kanggo teknologi pitulung (contone, nggunakake aria-label). Deleng bagean aksesibilitas ringkesan formulir kanggo rincian.

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>

Ngalih tombol

Nggawe kothak centhang kaya tombol lan tombol radio kanthi nggunakake .btngaya tinimbang .form-check-labeling <label>unsur. Tombol pilihan iki bisa diklompokake maneh ing klompok tombol yen perlu.

Tombol ngalih kothak centhang

Ngalih tunggal

html

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

Dipriksa

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>

dipatèni

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 toggle kothak centhang iki identik karo tombol toggle plugin tombol . Nanging, padha dikirim kanthi beda dening teknologi assistive: kothak centhang bakal diumumake dening pembaca layar minangka "dicenthang" / "ora dicenthang" (amarga, sanajan katon, dhasar kasebut isih ana kothak centhang), dene tombol tombol toggle plugin bakal dicenthang. diumumake minangka "tombol" / "tombol ditekan". Pilihan ing antarane rong pendekatan iki bakal gumantung saka jinis pilihan sing sampeyan gawe, lan apa pilihan kasebut bakal migunani kanggo pangguna nalika diumumake minangka kothak centhang utawa minangka tombol nyata.

Tombol ngalih radio

Dipriksa Radio dipatèni 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 sing digarisake

Varian sing beda-beda .btn, kayata ing macem-macem gaya sing digarisake, didhukung.

Ngalih tunggal
Dipriksa
Dipriksa radio sukses Radio mbebayani

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>

Sass

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;