in English

Nhwehwɛmu ne radio ahorow

Yɛ cross-browser ne cross-device checkboxes ne radio ahorow a ɛkɔ so daa ne yɛn checks component a wɔasan akyerɛw koraa no.

Wɔ kratafa yi so

Kwan

Browser default checkboxes ne radios no wɔde .form-check, adesua ahorow a ɛtoatoa so ma input ahorow abien no nyinaa a ɛma wɔn HTML elements no nhyehyɛe ne wɔn nneyɛe tu mpɔn, a ɛma customization kɛse ne cross browser consistency no besi ananmu. Nnaka a wɔde hyɛ mu no yɛ nea wɔde paw nneɛma biako anaa pii wɔ list bi mu, bere a radio ahorow no yɛ nea wɔde paw ɔkwan biako fi pii mu.

Wɔ nhyehyɛe mu no, yɛn <input>s ne <label>s yɛ anuanom nneɛma a ɛne an <input>within a <label>. Eyi yɛ verbose kakra sɛnea ɛsɛ sɛ wokyerɛ idne forattributes de bata <input>ne <label>. Yɛde anuanom paw ( ~) di dwuma ma yɛn <input>aman nyinaa, te sɛ :checkedanaa :disabled. Sɛ yɛde ka .form-check-labeladesuakuw no ho a, ɛnyɛ den sɛ yebetumi agyina <input>'s tebea so ayɛ nkyerɛwee no ama ade biara.

Yɛn nhwehwɛmu ahorow no de Bootstrap ahyɛnsode ahorow a wɔahyɛ da ayɛ no di dwuma de kyerɛ tebea horow a wɔahwɛ mu anaasɛ wɔankyerɛ.

Nhwehwɛmu ahorow

Default a wɔde ahyɛ mu

Wɔahyɛ checkbox no mu

html na ɛwɔ hɔ

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

Nea wontumi nsi ho gyinae

Checkboxes betumi de :indeterminatepseudo class no adi dwuma bere a wɔde nsa ahyɛ mu denam JavaScript so (HTML su biara nni hɔ a wɔde bɛkyerɛ).

Indeterminate checkbox a wɔde hyɛ mu

html na ɛwɔ hɔ

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

Dɛmdie

Fa disabledattribute no ka ho na <label>s a ɛbata ho no yɛ automatically styled sɛ ɛne kɔla a ɛyɛ hare hyia de boa kyerɛ input no tebea.

Wɔagyae indeterminate checkbox no

Disabled checkbox a ɛwɔ hɔ no

Disabled ahyɛ checkbox no mu

html na ɛwɔ hɔ

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

Radio a wɔahyɛ da ayɛ

Default a wɔahwɛ radio so

html na ɛwɔ hɔ

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

Dɛmdie

Fa disabledattribute no ka ho na <label>s a ɛbata ho no yɛ automatically styled sɛ ɛne kɔla a ɛyɛ hare hyia de boa kyerɛ input no tebea.

Radio a wɔadi dɛm

Radio a wɔahwɛ so a wɔadi dɛm

html na ɛwɔ hɔ

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

Nsakrae ahorow

Switch bi wɔ markup a ɛwɔ custom checkbox nanso ɛde .form-switchclass no di dwuma de kyerɛ toggle switch. Susuw ho sɛ wode bedi dwuma role="switch"de akyerɛ sɛnea tumidi no te no yiye akɔ mfiridwuma a ɛboa a ɛboa saa dwumadi yi so. Wɔ mfiridwuma dedaw a ɛboa mu no, wɔde bɛto gua ara kwa sɛ adaka a wɔde hyɛ mu daa sɛ fallback. Switches nso boa disabledattribute no.

Default switch checkbox a wɔde hyɛ mu

Wɔahwɛ switch checkbox input no mu

Disabled switch checkbox a wɔde hyɛ mu

Disabled checked switch checkbox nsɛm a wɔde hyɛ mu

html na ɛwɔ hɔ

<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 (a wɔaboaboa ano) .

Sɛnea wɔahyɛ no, wɔde checkbox ne radio dodow biara a ɛyɛ anuanom a wɔbɛn no ntɛm ara no bɛhyehyɛ no tẽẽ na wɔde .form-check.

Default a wɔde ahyɛ mu

Disabled checkbox a ɛwɔ hɔ no

html na ɛwɔ hɔ

<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 a wɔahyɛ da ayɛ

Radio a ɛto so abien a wɔde ahyɛ hɔ

Radio a wɔadi dɛm

html na ɛwɔ hɔ

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

Kuw checkboxes anaa radio ahorow wɔ row koro no ara a ɛkɔ soro no so denam biribiara a wode bɛka ho .form-check-inlineno so .form-check.

1. 1.

2. 2.

3 (wɔn a wɔadi dɛm) .

html na ɛwɔ hɔ

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

1. 1.

2. 2.

3 (wɔn a wɔadi dɛm) .

html na ɛwɔ hɔ

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

San akyi

Fa wo checkboxes, radios, ne switches no to ɔfã a ɛne no bɔ abira no so ne .form-check-reversemodifier class no.

Reverse checkbox no akyi

Disabled reverse checkbox a ɛwɔ akyi no

Reverse switch checkbox a wɔde hyɛ mu

html na ɛwɔ hɔ

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

Sɛ wɔmfa nkyerɛwde biara nka ho

Yi wrapping no fi hɔ .form-checkma checkboxes ne radio ahorow a enni label text no. Kae sɛ wobɛda so ara de din bi a wotumi nya ma mfiridwuma a ɛboa (sɛ nhwɛso no, de di dwuma aria-label). Hwɛ nkrataa no ho nsɛm a wɔaka abom a ɛfa akwan a wɔfa so nya nneɛma ho ɔfã no ma nsɛm no mu nsɛm.

html na ɛwɔ hɔ

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

Toggle button ahorow no

Yɛ checkboxes a ɛte sɛ button ne radio buttons denam .btnstyles a wode bedi dwuma sen sɛ wode bedi dwuma .form-check-labelwɔ <label>elements no so. Wobetumi aboaboa saa toggle buttons yi ano bio wɔ button kuw bi mu sɛ ɛho hia a.

Checkbox toggle buttons no mu nsɛm

Toggle biako pɛ

html na ɛwɔ hɔ

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

Wɔahwɛ mu

html na ɛwɔ hɔ

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

Dɛmdie

html na ɛwɔ hɔ

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

Sɛ wohwɛ a, saa checkbox toggle buttons yi ne button plugin toggle buttons no yɛ pɛ . Nanso, ɛsono sɛnea mfiridwuma ahorow a ɛboa no de ma: screen akenkanfo bɛbɔ checkbox toggles no ho amanneɛ sɛ “wɔahyɛ no agyirae”/“wɔanhwɛ” (esiane sɛ, ɛmfa ho sɛnea ɛte no, ne titiriw no, wɔda so ara yɛ checkbox ahorow), bere a button plugin toggle buttons no bɛyɛ saa wɔde too gua sɛ “button”/“button a wɔabɔ”. Nneɛma abien yi mu a wobɛpaw no begyina toggle ko a woreyɛ no so, ne sɛ ebia toggle no bɛyɛ nea ntease wom ama wɔn a wɔde di dwuma bere a wɔde to gua sɛ checkbox anaasɛ sɛ button ankasa anaasɛ ɛnte saa.

Radio so nsɛm a wɔde dannan nneɛma

Wɔahwɛ mu Radio so Dɛmdie Radio so

html na ɛwɔ hɔ

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

Nneɛma a wɔde yɛ nneɛma a wɔakyerɛkyerɛ mu

Wɔboa , ahorow ahorow a ɛsono emu biara .btn, te sɛ wɔ akwan horow a wɔakyerɛkyerɛ mu no so.

Toggle biako pɛ
Wɔahwɛ mu
Hwɛ nkonimdi radio so Asiane radio

html na ɛwɔ hɔ

<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

Nneɛma a Ɛsakra

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