Cék sareng radio

Jieun kotak centang cross-browser sareng cross-alat anu konsisten sareng radio sareng komponén cek anu lengkep ditulis ulang.

Dina kaca ieu

Ngadeukeutan

Kotak centang standar browser jeung radio diganti ku bantuan .form-check, runtuyan kelas pikeun duanana jenis input nu ngaronjatkeun perenah jeung kabiasaan elemen HTML maranéhna, nu nyadiakeun kustomisasi gede tur konsistensi cross browser. Kotak centang kanggo milih hiji atanapi sababaraha pilihan dina daptar, sedengkeun radio kanggo milih hiji pilihan tina seueur.

Sacara stuktur, <input>s jeung <label>s urang téh elemen duduluran sabalikna hiji <input>dina hiji <label>. Ieu rada leuwih verbose anjeun kudu nangtukeun idjeung foratribut pakait jeung <input>jeung <label>. Urang make pamilih sibling ( ~) pikeun sakabéh <input>nagara bagian urang, kawas :checkedatawa :disabled. Lamun digabungkeun jeung .form-check-labelkelas, urang bisa kalayan gampang gaya téks pikeun tiap item dumasar kana <input>'s kaayaan.

Cék kami nganggo ikon Bootstrap khusus pikeun nunjukkeun kaayaan anu dipariksa atanapi teu ditangtukeun.

Cék

Kotak centang standar

kotak centang

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>

Teu tangtu

Kotak centang tiasa ngagunakeun :indeterminatekelas pseudo nalika diatur sacara manual via JavaScript (teu aya atribut HTML anu sayogi pikeun nangtukeunana).

Kotak centang teu tangtu

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>

ditumpurkeun

Nambahkeun disabledatribut jeung pakait <label>s otomatis gaya cocog jeung warna torek pikeun mantuan nunjukkeun kaayaan input urang.

Kotak centang teu tangtu ditumpurkeun

Kotak centang ditumpurkeun

Dipareuman kotak centang

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

Radio standar

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

ditumpurkeun

Nambahkeun disabledatribut jeung pakait <label>s otomatis gaya cocog jeung warna torek pikeun mantuan nunjukkeun kaayaan input urang.

radio ditumpurkeun

Radio dipariksa ditumpurkeun

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>

Saklar

A switch boga markup tina kotak centang custom tapi ngagunakeun .form-switchkelas pikeun ngajadikeun switch toggle. Pertimbangkeun ngagunakeun role="switch"pikeun langkung akurat nepikeun sifat kontrol ka téknologi pitulung anu ngadukung peran ieu. Dina téknologi pitulung anu langkung lami, éta ngan saukur bakal diumumkeun salaku kotak centang biasa salaku fallback. Saklar ogé ngarojong disabledatribut.

Input kotak centang switch standar

Input kotak centang switch dipariksa

Input kotak centang switch ditumpurkeun

Input kotak centang saklar dipariksa ditumpurkeun

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

Sacara standar, sajumlah kotak centang sareng radio anu saderek langsung bakal ditumpuk sacara vertikal sareng dipasihkeun sacara pas sareng .form-check.

Kotak centang standar

Kotak centang ditumpurkeun

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 kadua

radio ditumpurkeun

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>

Baris

Grup centang atawa radio dina baris horizontal sarua ku nambahkeun .form-check-inlinekana sagala .form-check.

3 (cacad)

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

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>

Ngabalikeun

Pasang kotak centang anjeun, radio, sareng saklar di sisi sabalikna sareng .form-check-reversekelas modifier.

Balikkeun kotak centang

Dinonaktipkeun kotak centang sabalikna

Saklar balikkeun input kotak centang

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 labél

Ngaleungitkeun bungkus .form-checkkotak centang sareng radio anu teu aya téks labél. Inget pikeun masih nyadiakeun sababaraha bentuk ngaran diaksés pikeun téknologi pitulung (contona, ngagunakeun aria-label). Tingali bagian aksésibilitas tinjauan formulir pikeun detil.

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>

Togol tombol

Jieun kotak centang kawas tombol jeung tombol radio ku ngagunakeun .btngaya tinimbang .form-check-labeldina <label>elemen. Tombol toggle ieu salajengna tiasa dikelompokkeun dina grup tombol upami diperyogikeun.

Tombol togol kotak centang

Togel tunggal

html

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

Dipariksa

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>

ditumpurkeun

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>

Sacara visual, tombol toggle kotak centang ieu idéntik jeung tombol toggle plugin tombol . Tapi, aranjeunna dikirimkeun sacara béda ku téknologi anu ngabantosan: togél kotak centang bakal diumumkeun ku pamiarsa layar salaku "dipariksa" / "henteu dipariksa" (sabab, sanaos penampilanna, aranjeunna dina dasarna masih kotak centang), sedengkeun tombol togél plugin tombol bakal aya. diumumkeun salaku "tombol" / "tombol dipencet". Pilihan antara dua pendekatan ieu bakal gumantung kana jinis toggle anu anjeun ciptakeun, sareng naha togél éta bakal asup akal pikeun pangguna nalika diumumkeun salaku kotak centang atanapi salaku tombol anu saleresna.

Tombol togél radio

Dipariksa Radio ditumpurkeun 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 outlined

Varian anu béda tina .btn, sapertos dina rupa-rupa gaya anu digariskeun, dirojong.

Togel tunggal
Dipariksa
Radio kasuksésan dipariksa 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>

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;