Mga tseke at radyo

Gumawa ng pare-parehong cross-browser at cross-device na mga checkbox at radyo gamit ang aming ganap na muling isinulat na bahagi ng mga pagsusuri.

Sa pahinang ito

Lapitan

Ang mga default na checkbox at radyo ng browser ay pinapalitan sa tulong ng .form-check, isang serye ng mga klase para sa parehong mga uri ng pag-input na nagpapahusay sa layout at gawi ng kanilang mga elemento ng HTML, na nagbibigay ng higit na pagpapasadya at pagkakapare-pareho ng cross browser. Ang mga checkbox ay para sa pagpili ng isa o ilang mga opsyon sa isang listahan, habang ang mga radyo ay para sa pagpili ng isang opsyon mula sa marami.

Sa istruktura, ang ating <input>s at <label>s ay magkakapatid na elemento kumpara sa isang <input>within a <label>. Ito ay bahagyang mas verbose dahil kailangan mong tukuyin idat formga katangian upang maiugnay ang <input>at <label>. Ginagamit namin ang sibling selector ( ~) para sa lahat ng aming <input>estado, tulad ng :checkedo :disabled. Kapag pinagsama sa .form-check-labelklase, madali nating mai-istilo ang teksto para sa bawat item batay sa <input>estado ng 's.

Gumagamit ang aming mga pagsusuri ng mga custom na icon ng Bootstrap upang isaad ang mga naka-check o hindi tiyak na estado.

Mga tseke

Default na checkbox

Nilagyan ng check ang checkbox

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>

Walang katiyakan

Maaaring gamitin ng mga checkbox ang :indeterminatepseudo class kapag manu-manong itinakda sa pamamagitan ng JavaScript (walang available na HTML attribute para sa pagtukoy nito).

Hindi tiyak na checkbox

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>

Hindi pinagana

Idagdag ang disabledattribute at ang mga nauugnay <label>na s ay awtomatikong naka-istilo upang tumugma sa mas maliwanag na kulay upang makatulong na ipahiwatig ang katayuan ng input.

Naka-disable ang indeterminate na checkbox

Naka-disable ang checkbox

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>

Mga radyo

Default na radyo

Default na naka-check na radyo

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>

Hindi pinagana

Idagdag ang disabledattribute at ang mga nauugnay <label>na s ay awtomatikong naka-istilo upang tumugma sa mas maliwanag na kulay upang makatulong na ipahiwatig ang katayuan ng input.

Hindi pinagana ang radyo

Naka-disable ang checked radio

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>

Mga switch

Ang switch ay may markup ng custom na checkbox ngunit ginagamit ang .form-switchklase para mag-render ng toggle switch. Isaalang-alang ang paggamit role="switch"upang mas tumpak na maihatid ang katangian ng kontrol sa mga pantulong na teknolohiya na sumusuporta sa tungkuling ito. Sa mas lumang mga teknolohiyang pantulong, ito ay iaanunsyo lamang bilang isang regular na checkbox bilang isang fallback. Sinusuportahan din ng mga switch ang disabledkatangian.

Default na switch checkbox input

Nilagyan ng check ang switch checkbox input

Naka-disable ang switch checkbox input

Naka-disable ang checkbox na input ng check ng switch

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

Bilang default, ang anumang bilang ng mga checkbox at radyo na agarang magkakapatid ay patayo na isalansan at naaangkop na lagyan ng espasyo sa .form-check.

Default na checkbox

Naka-disable ang checkbox

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>

Default na radyo

Pangalawang default na radyo

Hindi pinagana ang radyo

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>

Nasa linya

Igrupo ang mga checkbox o radyo sa parehong pahalang na hilera sa pamamagitan ng pagdaragdag .form-check-inlinesa alinmang .form-check.

3 (naka-disable)

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 (naka-disable)

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>

Reverse

Ilagay ang iyong mga checkbox, radyo, at switch sa tapat ng .form-check-reverseklase ng modifier.

Baliktarin ang checkbox

Naka-disable ang reverse checkbox

Baliktarin ang switch checkbox 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>

Nang walang mga label

Alisin ang pambalot .form-checkpara sa mga checkbox at radyo na walang label na text. Tandaan na magbigay pa rin ng ilang uri ng naa-access na pangalan para sa mga pantulong na teknolohiya (halimbawa, gamit ang aria-label). Tingnan ang seksyon ng accessibility ng pangkalahatang-ideya ng mga form para sa mga detalye.

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>

I-toggle ang mga button

Gumawa ng mga checkbox na parang button at radio button sa pamamagitan ng paggamit ng mga .btnistilo sa halip .form-check-labelna sa mga <label>elemento. Ang mga toggle button na ito ay maaaring higit pang igrupo sa isang pangkat ng button kung kinakailangan.

Mga toggle button ng checkbox

Single toggle

html

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

Sinuri

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>

Hindi pinagana

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>

Biswal, ang mga checkbox toggle button na ito ay kapareho ng button na plugin toggle buttons . Gayunpaman, naiiba ang mga ito sa pamamagitan ng mga pantulong na teknolohiya: ang mga checkbox toggle ay iaanunsyo ng mga screen reader bilang "naka-check" / "hindi naka-check" (dahil, sa kabila ng kanilang hitsura, ang mga ito ay mga checkbox pa rin sa panimula), samantalang ang mga button na plugin na toggle button ay magiging inihayag bilang "button"/"pindot na pinindot". Ang pagpili sa pagitan ng dalawang approach na ito ay depende sa uri ng toggle na iyong ginagawa, at kung ang toggle ay magiging makabuluhan o hindi sa mga user kapag inihayag bilang isang checkbox o bilang isang aktwal na button.

Mga toggle button ng radyo

Sinuri Radyo Hindi pinagana Radyo

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>

Mga nakabalangkas na istilo

Iba't ibang variant ng .btn, tulad ng sa iba't ibang nakabalangkas na istilo, ay sinusuportahan.

Single toggle
Sinuri
Sinuri ang tagumpay sa radyo Panganib na radyo

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

Mga variable

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