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

<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

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

Nabalda ang checkbox

Gibalda ang gitsek nga checkbox

<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

<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

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

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" 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" 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" 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" 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

<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

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

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

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

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.

<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

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

Gisusi

<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

<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

<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

<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 10l3 3l6-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;