Sjekker og radioer

Lag konsekvente avmerkingsbokser og radioer på tvers av nettlesere og flere enheter med vår fullstendig omskrevne sjekkekomponent.

På denne siden

Nærme seg

Nettlesers standardavmerkingsbokser og radioer erstattes ved hjelp av .form-check, en serie klasser for begge inngangstypene som forbedrer oppsettet og oppførselen til HTML-elementene deres, som gir større tilpasning og konsistens på tvers av nettlesere. Avmerkingsbokser er for å velge ett eller flere alternativer i en liste, mens radioer er for å velge ett alternativ fra mange.

Strukturelt sett er våre <input>s og <label>s søskenelementer i motsetning til en <input>innenfor en <label>. Dette er litt mer detaljert ettersom du må spesifisere idog forattributter for å relatere <input>og <label>. Vi bruker søskenvelgeren ( ~) for alle <input>delstatene våre, som :checkedeller :disabled. Når det kombineres med .form-check-labelklassen, kan vi enkelt style teksten for hvert element basert på <input>'s-tilstanden.

Våre sjekker bruker tilpassede Bootstrap-ikoner for å indikere sjekkede eller ubestemte tilstander.

Sjekker

Standard avmerkingsboks

Krysset av

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>

Ubestemt

Avmerkingsbokser kan bruke :indeterminatepseudoklassen når den er satt manuelt via JavaScript (det er ingen tilgjengelig HTML-attributt for å spesifisere den).

Ubestemt avmerkingsboks

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>

Funksjonshemmet

Legg til disabledattributtet, og de tilknyttede <label>s-ene blir automatisk stilisert for å matche med en lysere farge for å hjelpe med å indikere inngangens tilstand.

Deaktivert ubestemt avmerkingsboks

Deaktivert avmerkingsboks

Deaktivert merket av for

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>

Radioer

Standard radio

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

Funksjonshemmet

Legg til disabledattributtet, og de tilknyttede <label>s-ene blir automatisk stilisert for å matche med en lysere farge for å hjelpe med å indikere inngangens tilstand.

Deaktivert radio

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

Brytere

En bryter har markeringen av en egendefinert avmerkingsboks, men bruker .form-switchklassen til å gjengi en vippebryter. Vurder å bruke role="switch"for mer nøyaktig å formidle kontrollens natur til hjelpeteknologier som støtter denne rollen. I eldre hjelpeteknologier vil det ganske enkelt bli annonsert som en vanlig avmerkingsboks som en reserve. Brytere støtter også disabledattributtet.

Standard inndata for bryter avkrysningsboks

Sjekket inndata for bryteravkrysningsboks

Deaktivert bryteravkrysningsboksinngang

Deaktivert avkrysset bryteravkrysningsboksinngang

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

Som standard vil et hvilket som helst antall avmerkingsbokser og radioer som er umiddelbare søsken, stables vertikalt og hensiktsmessig fordelt med .form-check.

Standard avmerkingsboks

Deaktivert avmerkingsboks

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

Andre standard radio

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

På linje

Grupper avmerkingsbokser eller radioer på samme horisontale rad ved å legge .form-check-inlinetil en .form-check.

3 (deaktivert)

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

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>

Omvendt

Sett avmerkingsboksene, radioene og bryterne på motsatt side med .form-check-reversemodifiseringsklassen.

Omvendt avmerkingsboks

Deaktivert reverseringsboks

Inngang for reversbryter avkrysningsboks

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>

Uten merkelapper

Utelat innpakningen .form-checkfor avmerkingsbokser og radioer som ikke har etiketttekst. Husk å fortsatt oppgi en form for tilgjengelig navn for hjelpeteknologier (for eksempel ved å bruke aria-label). Se avsnittet om tilgjengelighet for skjemaoversikt for detaljer.

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>

Veksleknapper

Lag knapplignende avmerkingsbokser og alternativknapper ved å bruke .btnstiler i stedet for .form-check-labelpå <label>elementene. Disse veksleknappene kan videre grupperes i en knappegruppe om nødvendig.

Avkrysningsboksknapper

Enkel bryter

html

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

Sjekket

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>

Funksjonshemmet

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>

Visuelt er disse veksleknappene for avmerkingsboks identiske med veksleknappene for knappplugin . Imidlertid formidles de annerledes av hjelpeteknologier: avkrysningsboksene vil bli annonsert av skjermlesere som "avmerket"/"ikke avmerket" (siden, til tross for at de ser ut, er de i utgangspunktet fortsatt avmerkingsbokser), mens knappene for plugin-knappene vil være annonsert som "knapp"/"knapp trykket". Valget mellom disse to tilnærmingene vil avhenge av typen veksler du oppretter, og hvorvidt vekslingen vil gi mening for brukere når den annonseres som en avkrysningsboks eller som en faktisk knapp.

Radio-veksleknapper

Sjekket Radio Funksjonshemmet 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>

Skisserte stiler

Ulike varianter av .btn, for eksempel ved de forskjellige skisserte stilene, støttes.

Enkel bryter
Sjekket
Sjekket suksessradio Fareradio

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;