in English

Mga tseke ug radyo

Paghimo makanunayon nga cross-browser ug cross-device nga mga checkbox ug radyo gamit ang among hingpit nga gisulat pag-usab nga bahin sa mga tseke.

Niini nga panid

Pagduol

Ang default nga mga checkbox ug mga radyo sa browser gipulihan sa tabang sa .form-check, usa ka serye sa mga klase alang sa duha ka tipo sa input nga nagpauswag sa layout ug kinaiya sa ilang mga elemento sa HTML, nga naghatag og mas dako nga customization ug cross browser consistency. Ang mga checkbox kay para sa pagpili og usa o ubay-ubay nga mga opsyon sa usa ka lista, samtang ang mga radyo para sa pagpili og usa ka opsyon gikan sa daghan.

Sa estruktura, ang atong <input>s ug <label>s kay managsuon nga elemento sukwahi sa <input>sulod sa <label>. Kini mao ang gamay nga mas verbose ingon nga kamo kinahanglan gayud nga espesipiko idug formga hiyas sa pag-asoy sa <input>ug <label>. Gigamit namo ang sibling selector ( ~) para sa tanan namong <input>estado, sama sa :checkedo :disabled. Kung gihiusa sa .form-check-labelklase, dali ra naton ma-istilo ang teksto alang sa matag aytem base sa <input>estado sa 's.

Gigamit sa among mga tseke ang naandan nga mga icon sa Bootstrap aron ipakita ang gisusi o dili matino nga mga estado.

Mga tseke

Default nga checkbox

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

Dili matino

Mahimong gamiton sa mga checkbox ang :indeterminatepseudo class kung mano-mano nga itakda pinaagi sa JavaScript (walay magamit nga HTML attribute para sa pagtino niini).

Dili matino nga 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>

Nabaldado

Idugang ang disabledattribute ug ang mga kaubang <label>s awtomatik nga gi-istilo aron mohaum sa mas gaan nga kolor aron makatabang sa pagpakita sa kahimtang sa input.

Nabaldado nga dili matino nga checkbox

Nabalda ang checkbox

Gibalda ang gitsek nga 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 nga radyo

Default nga gisusi nga 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>

Nabaldado

Idugang ang disabledattribute ug ang mga kaubang <label>s awtomatik nga gi-istilo aron mohaum sa mas gaan nga kolor aron makatabang sa pagpakita sa kahimtang sa input.

Nabaldado nga radyo

Gibalda ang gisusi nga radyo

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 usa ka switch adunay marka sa usa ka custom nga checkbox apan naggamit sa .form-switchklase sa paghimo sa usa ka toggle switch. Ikonsiderar ang paggamit role="switch"aron mas tukma nga ipaabot ang kinaiyahan sa kontrol sa mga teknolohiya nga makatabang nga nagsuporta niini nga tahas. Sa mas karaan nga mga teknolohiya sa pagtabang, kini yano nga ipahibalo ingon usa ka regular nga checkbox ingon usa ka fallback. Gisuportahan usab sa mga switch ang disabledattribute.

Default nga switch checkbox input

Gisusi ang switch checkbox input

Gibalda ang switch checkbox input

Gibalda ang gisusi nga switch checkbox input

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

Sa kasagaran, ang bisan unsang gidaghanon sa mga checkbox ug radyo nga igsoon diha-diha dayon ibutang nga patindog ug haom nga ibutang sa .form-check.

Default nga checkbox

Nabalda 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 nga radyo

Ikaduha nga default nga radyo

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

Inline

Grupo ang mga checkbox o radyo sa parehas nga pinahigda nga laray pinaagi sa pagdugang .form-check-inlinesa bisan unsang .form-check.

3 (baldado)

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

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>

Baliktad

Ibutang ang imong mga checkbox, radyo, ug switch sa atbang nga bahin sa .form-check-reverseklase sa modifier.

Balika ang checkbox

Gibalda ang balik nga checkbox

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

Walay mga label

Isalikway ang pagputos .form-checksa mga checkbox ug radyo nga walay label nga teksto. Hinumdumi nga maghatag gihapon og usa ka porma sa ma-access nga ngalan alang sa mga teknolohiya nga makatabang (pananglitan, gamit ang aria-label). Tan-awa ang mga porma sa overview nga seksyon sa accessibility alang 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 buton

Paghimo og sama sa buton nga mga checkbox ug radio button pinaagi sa paggamit sa .btnmga estilo kay .form-check-labelsa mga <label>elemento. Kini nga mga toggle nga butones mahimo pa nga ma-grupo sa usa ka grupo sa buton kung gikinahanglan.

Checkbox toggle buttons

Usa ka toggle

html

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

Gisusi

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>

Nabaldado

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>

Sa tan-aw, kini nga mga checkbox toggle button parehas sa button nga plugin toggle buttons . Bisan pa, lahi kini nga gipahayag pinaagi sa mga teknolohiya nga makatabang: ang mga toggle sa checkbox ipahibalo sa mga magbabasa sa screen nga "gisusi" / "wala gisusi" (tungod kay, bisan pa sa ilang hitsura, sila sa sukaranan mga checkbox), samtang ang mga buton nga toggle sa button sa plugin gipahibalo nga "button" / "button nga gipugos". Ang pagpili tali niining duha ka mga pamaagi magdepende sa matang sa toggle nga imong gimugna, ug kon ang toggle ba makahuluganon sa mga tiggamit kung gipahibalo isip usa ka checkbox o isip usa ka aktuwal nga buton.

Mga toggle button sa radyo

Gisusi Radyo Nabaldado 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>

Gi-outline nga mga estilo

Lain-laing mga variant sa .btn, sama sa lain-laing mga outlined estilo, gisuportahan.

Usa ka toggle
Gisusi
Gisusi ang kalampusan sa radyo Peligro nga 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;