Neidio i'r prif gynnwys Neidio i lywio dogfennau
Check
in English

Gwiriadau a radios

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

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

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>

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

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>

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.

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>

Radios

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>

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.

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>

Switsys

Mae gan switsh farcio blwch ticio personol ond mae'n defnyddio'r .form-switchdosbarth i wneud switsh togl. Ystyried defnyddio role="switch"i gyfleu yn fwy cywir natur y rheolaeth i dechnolegau cynorthwyol sy'n cefnogi'r rôl hon. Mewn technolegau cynorthwyol hŷn, bydd yn cael ei gyhoeddi fel blwch gwirio rheolaidd fel wrth gefn. Mae switshis hefyd yn cefnogi'r disabledpriodoledd.

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>

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.

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

Mewn llinell

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

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

Gwrthdroi

Rhowch eich blychau ticio, radios, a switshis ar yr ochr arall gyda'r .form-check-reversedosbarth addasydd.

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>

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.

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>

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

html
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
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>
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>
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

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>

Arddulliau amlinellol

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



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

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