Cheques en radio's

Creëer consistente cross-browser en cross-device checkboxen en radio's met onze volledig herschreven controlecomponent.

Op deze pagina

Nadering

Standaard checkboxen en radio's van de browser worden vervangen met behulp van .form-check, een reeks klassen voor beide invoertypen die de lay-out en het gedrag van hun HTML-elementen verbeteren, die meer maatwerk en consistentie tussen browsers bieden. Selectievakjes zijn voor het selecteren van een of meerdere opties in een lijst, terwijl radio's zijn voor het selecteren van één optie uit vele.

Structureel zijn onze <input>s en <label>s broers en zussen, in tegenstelling tot een <input>binnen een <label>. Dit is iets uitgebreider omdat u iden attributen moet specificeren om de en forte relateren . We gebruiken de broer of zus selector ( ) voor al onze staten, zoals of . In combinatie met de klasse kunnen we de tekst voor elk item eenvoudig opmaken op basis van de 'status.<input><label>~<input>:checked:disabled.form-check-label<input>

Onze controles gebruiken aangepaste Bootstrap-pictogrammen om gecontroleerde of onbepaalde statussen aan te geven.

cheques

Standaard selectievakje

Aangevinkt selectievakje

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

onbepaald

Selectievakjes kunnen de :indeterminatepseudo-klasse gebruiken wanneer ze handmatig worden ingesteld via JavaScript (er is geen HTML-attribuut beschikbaar om het te specificeren).

Onbepaald selectievakje

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

Gehandicapt

Voeg het disabledattribuut toe en de bijbehorende <label>s worden automatisch gestyled om overeen te komen met een lichtere kleur om de status van de invoer aan te geven.

Uitgeschakeld selectievakje

Uitgeschakeld aangevinkt selectievakje

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

Radio's

Standaard radio

Standaard aangevinkte radio

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

Gehandicapt

Voeg het disabledattribuut toe en de bijbehorende <label>s worden automatisch gestyled om overeen te komen met een lichtere kleur om de status van de invoer aan te geven.

uitgeschakelde radio

Uitgeschakeld gecontroleerde radio

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

Schakelaars

Een schakelaar heeft de opmaak van een aangepast selectievakje, maar gebruikt de .form-switchklasse om een tuimelschakelaar weer te geven. Overweeg role="switch"om de aard van de besturing nauwkeuriger over te brengen op ondersteunende technologieën die deze rol ondersteunen. In oudere ondersteunende technologieën wordt het gewoon aangekondigd als een normaal selectievakje als een uitwijkmogelijkheid. Switches ondersteunen ook het disabledattribuut.

Standaard schakelaar checkbox invoer

Aangevinkt switch checkbox input

Invoer van schakelvak uitgeschakeld

Uitgeschakeld aangevinkt schakelaar checkbox input

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

Standaard (gestapeld)

Standaard wordt een willekeurig aantal selectievakjes en radio's die direct broer of zus zijn, verticaal gestapeld en op de juiste afstand geplaatst met .form-check.

Standaard selectievakje

Uitgeschakeld selectievakje

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

Standaard radio

Tweede standaard radio

uitgeschakelde radio

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

In lijn

Groepeer selectievakjes of radio's op dezelfde horizontale rij door .form-check-inlineaan een willekeurig .form-check.

3 (uitgeschakeld)

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

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

Zonder labels

Laat de verpakking weg .form-checkvoor selectievakjes en radio's die geen labeltekst hebben. Vergeet niet om nog steeds een of andere toegankelijke naam op te geven voor ondersteunende technologieën (bijvoorbeeld met behulp van aria-label). Zie het gedeelte over toegankelijkheid van formulieren voor meer informatie.

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

Schakelknoppen

Maak knopachtige selectievakjes en keuzerondjes door .btnstijlen te gebruiken in plaats van .form-check-labelop de <label>elementen. Deze schakelknoppen kunnen indien nodig verder worden gegroepeerd in een knopgroep .

Schakelknoppen voor selectievakjes

Enkele schakelaar

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

Gecontroleerd

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

Gehandicapt

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

Visueel zijn deze schakelknoppen voor selectievakjes identiek aan de schakelknoppen voor plug-ins . Ze worden echter op een andere manier overgebracht door ondersteunende technologieën: de schakelaars voor selectievakjes worden door schermlezers aangekondigd als "aangevinkt" / "niet aangevinkt" (aangezien ze, ondanks hun uiterlijk, in wezen nog steeds selectievakjes zijn), terwijl de schakelknoppen van de plug-in worden aangekondigd als "knop"/"knop ingedrukt". De keuze tussen deze twee benaderingen hangt af van het type schakelaar dat u aan het maken bent, en of de schakelaar zinvol is voor gebruikers wanneer deze wordt aangekondigd als een selectievakje of als een echte knop.

Schakelknoppen voor radio

Gecontroleerd Radio Gehandicapt 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>

Geschetste stijlen

Verschillende varianten van .btn, zoals bij de verschillende geschetste stijlen, worden ondersteund.

Enkele schakelaar
Gecontroleerd
Gecontroleerd succes radio Gevaar radio

<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

Variabelen

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