in English

Checks og radioer

Skab ensartede kryds-browsere og på tværs af enheder afkrydsningsfelter og radioer med vores fuldstændigt omskrevne kontrolkomponent.

På denne side

Nærme sig

Browserens standardafkrydsningsfelter og radioer erstattes ved hjælp af .form-check, en række klasser for begge inputtyper, der forbedrer layoutet og adfærden af deres HTML-elementer, som giver større tilpasning og ensartethed på tværs af browsere. Afkrydsningsfelter er til at vælge en eller flere muligheder på en liste, mens radioer er til at vælge en mulighed blandt mange.

Strukturelt er vores <input>s og <label>s søskendeelementer i modsætning til et <input>inden for et <label>. Dette er lidt mere udførligt, da du skal specificere idog forattributter for at relatere <input>og <label>. Vi bruger søskendevælgeren ( ~) til alle vores <input>stater, f.eks . :checkedeller :disabled. Når det kombineres med .form-check-labelklassen, kan vi nemt style teksten for hvert element baseret på <input>'s-tilstanden.

Vores checks bruger tilpassede Bootstrap-ikoner til at angive kontrollerede eller ubestemte tilstande.

Checks

Standard afkrydsningsfelt

Afkrydsningsfelt

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

Afkrydsningsfelter kan bruge :indeterminatepseudoklassen, når de indstilles manuelt via JavaScript (der er ingen tilgængelig HTML-attribut til at angive den).

Ubestemt afkrydsningsfelt

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>

handicappet

Tilføj disabledattributten, og de tilknyttede <label>s bliver automatisk stylet til at matche med en lysere farve for at hjælpe med at angive inputts tilstand.

Deaktiveret ubestemt afkrydsningsfelt

Deaktiveret afkrydsningsfelt

Deaktiveret markeret afkrydsningsfelt

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

handicappet

Tilføj disabledattributten, og de tilknyttede <label>s bliver automatisk stylet til at matche med en lysere farve for at hjælpe med at angive inputts tilstand.

Deaktiveret radio

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

Afbrydere

En switch har markeringen af et brugerdefineret afkrydsningsfelt, men bruger .form-switchklassen til at gengive en skiftekontakt. Overvej at bruge role="switch"til mere præcist at formidle karakteren af kontrollen til hjælpeteknologier, der understøtter denne rolle. I ældre hjælpeteknologier vil det blot blive annonceret som et almindeligt afkrydsningsfelt som en reserve. Switche understøtter også disabledattributten.

Standardindgang til afkrydsningsfelt for kontakt

Afkrydset kontaktafkrydsningsfeltindgang

Deaktiveret input afkrydsningsfelt

Deaktiveret afkrydset kontaktafkrydsningsfeltindgang

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 antal afkrydsningsfelter og radioer, der er umiddelbare søskende, være lodret stablet og passende fordelt med .form-check.

Standard afkrydsningsfelt

Deaktiveret afkrydsningsfelt

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

Anden standard radio

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

Inline

Grupper afkrydsningsfelter eller radioer i den samme vandrette række ved at tilføje .form-check-inlinetil en hvilken som helst .form-check.

3 (deaktiveret)

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

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>

Baglæns

Sæt dine afkrydsningsfelter, radioer og kontakter på den modsatte side med .form-check-reversemodifikatorklassen.

Omvendt afkrydsningsfelt

Deaktiveret omvendt afkrydsningsfelt

Indgang til afkrydsningsfelt for omskifter

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>

Uden etiketter

Udelad indpakningen .form-checkfor afkrydsningsfelter og radioer, der ikke har nogen etikettekst. Husk stadig at give en form for tilgængeligt navn til hjælpeteknologier (f.eks. ved hjælp af aria-label). Se afsnittet om formularoversigts tilgængelighed 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>

Skift knapper

Opret knaplignende afkrydsningsfelter og alternativknapper ved at bruge .btntypografier i stedet for .form-check-labelpå <label>elementerne. Disse skifteknapper kan yderligere grupperes i en knapgruppe, hvis det er nødvendigt.

Afkrydsningsfelt til/fra-knapper

Enkelt skifte

html

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

Tjekket

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>

handicappet

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 afkrydsningsfelt-skiftknapper identiske med knap-plugin-skifteknapperne . De formidles dog anderledes af hjælpeteknologier: afkrydsningsfelterne vil blive annonceret af skærmlæsere som "afkrydset"/"ikke markeret" (da de, på trods af deres udseende, grundlæggende stadig er afkrydsningsfelter), hvorimod knap-plugin-skiftknapperne vil være annonceret som "knap"/"knap trykket". Valget mellem disse to tilgange vil afhænge af den type skift, du opretter, og om skiftet vil give mening for brugerne, når det annonceres som et afkrydsningsfelt eller som en faktisk knap.

Radioskift-knapper

Tjekket Radio handicappet 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>

Skitserede stilarter

Forskellige varianter af .btn, såsom ved de forskellige skitserede stilarter, understøttes.

Enkelt skifte
Tjekket
Tjekkede succesradio 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;