Gwiriadau a radios

Creu blychau ticio a radios traws-borwr a thraws-ddyfais cyson gyda'n cydran sieciau wedi'i hailysgrifennu'n llwyr.

Ar y dudalen hon

Agwedd

Mae blychau ticio rhagosodedig porwr a radios yn cael eu disodli gyda chymorth .form-check, cyfres o ddosbarthiadau ar gyfer y ddau fath mewnbwn sy'n gwella gosodiad ac ymddygiad eu helfennau HTML, sy'n darparu mwy o addasu a chysondeb trawsborwr. Mae blychau ticio ar gyfer dewis un neu sawl opsiwn mewn rhestr, tra bod setiau radio ar gyfer dewis un opsiwn o blith llawer.

Yn strwythurol, mae ein <input>s ac <label>s yn elfennau brodyr a chwiorydd yn hytrach nag elfennau o <input>fewn <label>. Mae hyn ychydig yn fwy ar lafar gan fod yn rhaid i chi nodi ida forphriodoleddau i gysylltu'r <input>a <label>. Rydym yn defnyddio'r dewisydd brodyr a chwiorydd ( ~) ar gyfer ein holl <input>daleithiau, fel :checkedneu :disabled. O'i gyfuno â'r .form-check-labeldosbarth, gallwn yn hawdd arddullio'r testun ar gyfer pob eitem yn seiliedig ar y <input>cyflwr.

Mae ein gwiriadau'n defnyddio eiconau Bootstrap wedi'u teilwra i nodi cyflyrau sydd wedi'u gwirio neu amhenodol.

Sieciau

Blwch ticio rhagosodedig

Blwch ticio wedi'i dicio

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

Amhenodol

Gall blychau ticio ddefnyddio'r :indeterminatedosbarth ffug pan gânt eu gosod â llaw trwy JavaScript (nid oes priodoledd HTML ar gael i'w nodi).

Blwch ticio amhenodol

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

Anabl

Ychwanegwch y disabledpriodoledd ac mae'r s cysylltiedig <label>yn cael eu steilio'n awtomatig i gydweddu â lliw ysgafnach i helpu i nodi cyflwr y mewnbwn.

Blwch ticio anabl

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

Radios

Radio diofyn

Radio wedi'i wirio'n ddiofyn

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

Anabl

Ychwanegwch y disabledpriodoledd ac mae'r s cysylltiedig <label>yn cael eu steilio'n awtomatig i gydweddu â lliw ysgafnach i helpu i nodi cyflwr y mewnbwn.

Radio anabl

Radio anabl wedi'i wirio

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

Switsys

Mae gan switsh farcio blwch ticio personol ond mae'n defnyddio'r .form-switchdosbarth i wneud switsh togl. Mae switshis hefyd yn cefnogi'r disabledpriodoledd.

Mewnbwn blwch ticio switsh diofyn

Mewnbwn blwch ticio switsh wedi'i wirio

Mewnbwn blwch ticio switsh anabl

Mewnbwn blwch ticio switsh wedi'i wirio anabl

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

Rhagosodedig (wedi'i bentyrru)

Yn ddiofyn, bydd unrhyw nifer o flychau ticio a radios sy'n frawd neu chwaer uniongyrchol yn cael eu pentyrru'n fertigol a'u gosod mewn gofod priodol gyda .form-check.

Blwch ticio rhagosodedig

Blwch ticio anabl

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

Ail radio rhagosodedig

Radio anabl

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

Mewn llinell

Grwpiwch flychau ticio neu radios ar yr un rhes lorweddol trwy ychwanegu .form-check-inlineat unrhyw .form-check.

3 (anabl)

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

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

Heb labeli

Hepgorer y lapio .form-checkar gyfer blychau ticio a radios nad oes ganddynt destun label. Cofiwch barhau i ddarparu rhyw fath o enw hygyrch ar gyfer technolegau cynorthwyol (er enghraifft, defnyddio aria-label). Gweler yr adran hygyrchedd trosolwg o ffurflenni am fanylion.

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

Toglo botymau

Creu blychau ticio tebyg i fotymau a botymau radio trwy ddefnyddio .btnarddulliau yn hytrach nag .form-check-labelar yr <label>elfennau. Gellir grwpio'r botymau togl hyn ymhellach mewn grŵp botymau os oes angen.

Botymau toglo blwch ticio

Togl sengl

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

Gwiriwyd

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

Anabl

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

Yn weledol, mae'r botymau togl blwch ticio hyn yn union yr un fath â'r botymau toglo ategyn botwm . Fodd bynnag, maen nhw'n cael eu cyfleu'n wahanol gan dechnolegau cynorthwyol: bydd darllenwyr sgrin yn cyhoeddi bod y toglau blwch ticio wedi'u "gwirio" / "heb eu gwirio" (oherwydd, er gwaethaf eu hymddangosiad, maen nhw'n flychau ticio yn y bôn), tra bydd y botymau toglo ategyn botwm yn cael eu cyhoeddi fel “botwm”/“botwm wedi’i wasgu”. Bydd y dewis rhwng y ddau ddull hyn yn dibynnu ar y math o dogl rydych chi'n ei greu, ac a fydd y togl yn gwneud synnwyr i ddefnyddwyr ai peidio pan gaiff ei gyhoeddi fel blwch ticio neu fel botwm gwirioneddol.

Botymau toglo radio

Gwiriwyd Radio Anabl Radio

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

Arddulliau amlinellol

Cefnogir gwahanol amrywiadau o .btn, megis y gwahanol arddulliau a amlinellwyd.

Togl sengl
Gwiriwyd
Gwirio radio llwyddiant Radio perygl

<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

Newidynnau

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