in English

Checkar och radioapparater

Skapa konsekventa kryssrutor och radioapparater för flera webbläsare och enheter med vår helt omskrivna kontrollkomponent.

På den här sidan

Närma sig

Webbläsarens standardkryssrutor och radioapparater ersätts med hjälp av .form-check, en serie klasser för båda inmatningstyperna som förbättrar layouten och beteendet hos deras HTML-element, som ger större anpassning och konsistens över webbläsare. Kryssrutorna är för att välja ett eller flera alternativ i en lista, medan radioapparater är för att välja ett alternativ bland många.

Strukturellt sett är våra <input>s och <label>s syskonelement i motsats till ett <input>inom en <label>. Detta är något mer utförligt eftersom du måste specificera idoch forattribut för att relatera <input>och <label>. Vi använder syskonväljaren ( ~) för alla våra <input>stater, som :checkedeller :disabled. I kombination med .form-check-labelklassen kan vi enkelt utforma texten för varje objekt baserat på <input>'s-tillståndet.

Våra kontroller använder anpassade Bootstrap-ikoner för att indikera kontrollerade eller obestämda tillstånd.

Checkar

Standardkryssruta

Markerad kryssruta

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>

Obestämd

Kryssrutor kan använda :indeterminatepseudoklassen när de ställs in manuellt via JavaScript (det finns inget tillgängligt HTML-attribut för att specificera det).

Obestämd kryssruta

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>

Inaktiverad

Lägg till disabledattributet och de associerade <label>s formateras automatiskt för att matcha med en ljusare färg för att hjälpa till att indikera ingångens tillstånd.

Inaktiverad obestämd kryssruta

Inaktiverad kryssruta

Inaktiverad markerad kryssruta

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>

Radioapparater

Standard radio

Standardkontrollerad radio

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>

Inaktiverad

Lägg till disabledattributet och de associerade <label>s formateras automatiskt för att matcha med en ljusare färg för att hjälpa till att indikera ingångens tillstånd.

Inaktiverad radio

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

Växlar

En switch har markeringen av en anpassad kryssruta men använder .form-switchklassen för att återge en vippbrytare. Överväg att använda role="switch"för att mer exakt förmedla kontrollens natur till hjälpmedelstekniker som stöder denna roll. I äldre hjälpmedelstekniker kommer det helt enkelt att annonseras som en vanlig kryssruta som en reserv. Omkopplare stöder också disabledattributet.

Standardinmatning för omkopplarkryssruta

Markerad ingång för brytarkryssruta

Inaktiverad ingång för växelkryssruta

Inaktiverad markerad ingång för brytarkryssruta

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>

Standard (staplad)

Som standard kommer valfritt antal kryssrutor och radioapparater som är direkta syskon att vara vertikalt staplade och på lämpligt avstånd med .form-check.

Standardkryssruta

Inaktiverad kryssruta

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>

Standard radio

Andra standardradion

Inaktiverad radio

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>

I kö

Gruppera kryssrutor eller radioapparater på samma horisontella rad genom att lägga .form-check-inlinetill någon .form-check.

3 (inaktiverad)

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

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>

Omvänd

Placera dina kryssrutor, radioapparater och omkopplare på motsatt sida med .form-check-reversemodifieringsklassen.

Omvänd kryssruta

Inaktiverad omvänd kryssruta

Ingång för backströmbrytare

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>

Utan etiketter

Uteslut omslaget .form-checkför kryssrutor och radioapparater som inte har någon etiketttext. Kom ihåg att fortfarande tillhandahålla någon form av tillgängligt namn för hjälpmedel (till exempel genom att använda aria-label). Se avsnittet om tillgänglighet för formuläröversikter för mer information.

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>

Växla knappar

Skapa knappliknande kryssrutor och alternativknappar genom att använda .btnstilar snarare än .form-check-labelpå <label>elementen. Dessa växlingsknappar kan ytterligare grupperas i en knappgrupp om det behövs.

Kryssruta växlingsknappar

Enkel växling

html

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

Kontrollerade

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>

Inaktiverad

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>

Visuellt är dessa växlingsknappar för kryssrutorna identiska med växlingsknapparna för knappplugin . De förmedlas dock på olika sätt av hjälpmedel: växlingarna i kryssrutorna kommer att meddelas av skärmläsare som "markerade"/"inte markerade" (eftersom de, trots deras utseende, i grunden fortfarande är kryssrutor), medan växlingsknapparna för knappplugin kommer att vara meddelas som "knapp"/"knapp nedtryckt". Valet mellan dessa två tillvägagångssätt beror på vilken typ av växling du skapar, och om växlingen kommer att vara meningsfull för användarna eller inte när den tillkännages som en kryssruta eller som en faktisk knapp.

Radioväxlingsknappar

Kontrollerade Radio Inaktiverad 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>

Skisserade stilar

Olika varianter av .btn, t.ex. de olika stilarna som beskrivs, stöds.

Enkel växling
Kontrollerade
Kollade succéradio Fara radio

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

Variabler

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