Bootstrap 5.2 / Formulieren

Checks en radios

Maak consistente selectievakjes en radioknoppen voor alle browsers en apparaten met ons volledig herschreven checks-component.

Aanpak

De standaard selectievakjes en radioknoppen van de browser worden vervangen met behulp van .form-check, een reeks klassen voor beide invoertypes die de layout en het gedrag van hun HTML-elementen verbetert en die meer aanpasbaarheid en consistentie tussen browsers biedt. Selectievakjes zijn bedoeld om één of meer opties uit een lijst te kiezen, radioknoppen om één optie uit meerdere te kiezen.

Structureel zijn onze <input>s en <label>s aangrenzende elementen, in plaats van een <input> binnen een <label>. Dat is iets uitgebreider, omdat je id- en for-attributen moet opgeven om de <input> en het <label> aan elkaar te koppelen. We gebruiken de sibling-selector (~) voor al onze <input>-states, zoals :checked of :disabled. In combinatie met de klasse .form-check-label kunnen we de tekst van elk item eenvoudig opmaken op basis van de status van de <input>.

Onze checks gebruiken eigen Bootstrap-iconen om de checked- of indeterminate-status aan te geven.

Checks

HTML

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Standaard selectievakje
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Aangevinkt selectievakje
  </label>
</div>

Indeterminate

Selectievakjes kunnen gebruikmaken van de pseudo-klasse :indeterminate wanneer die handmatig via JavaScript wordt ingesteld (er is geen HTML-attribuut om dat op te geven).

HTML

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
  <label class="form-check-label" for="flexCheckIndeterminate">
    Onbepaald selectievakje
  </label>
</div>

Uitgeschakeld

Voeg het attribuut disabled toe en de bijbehorende <label>s worden automatisch met een lichtere kleur opgemaakt, wat de status van de input aangeeft.

HTML

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
  <label class="form-check-label" for="flexCheckIndeterminateDisabled">
    Uitgeschakeld onbepaald selectievakje
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
  <label class="form-check-label" for="flexCheckDisabled">
    Uitgeschakeld selectievakje
  </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">
    Uitgeschakeld aangevinkt selectievakje
  </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">
    Standaard radioknop
  </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">
    Standaard aangevinkte radioknop
  </label>
</div>

Uitgeschakeld

Voeg het attribuut disabled toe en de bijbehorende <label>s worden automatisch met een lichtere kleur opgemaakt, wat de status van de input aangeeft.

HTML

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
  <label class="form-check-label" for="flexRadioDisabled">
    Uitgeschakelde radioknop
  </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">
    Uitgeschakelde aangevinkte radioknop
  </label>
</div>

Switches

Een switch heeft de markup van een aangepast selectievakje, maar gebruikt de klasse .form-switch om een schakelaar weer te geven. Overweeg role="switch" te gebruiken om de aard van het besturingselement nauwkeuriger over te brengen aan hulptechnologieën die deze rol ondersteunen. In oudere hulptechnologieën wordt het als terugval gewoon als een normaal selectievakje aangekondigd. Switches ondersteunen ook het attribuut disabled.

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">Standaard switch-selectievakje</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">Aangevinkt switch-selectievakje</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">Uitgeschakeld switch-selectievakje</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">Uitgeschakeld aangevinkt switch-selectievakje</label>
</div>

Standaard (gestapeld)

Standaard worden willekeurig veel selectievakjes en radioknoppen die direct naast elkaar staan verticaal gestapeld en met .form-check van passende ruimte voorzien.

HTML

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Standaard selectievakje
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Uitgeschakeld selectievakje
  </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">
    Standaard radioknop
  </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">
    Tweede standaard radioknop
  </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">
    Uitgeschakelde radioknop
  </label>
</div>

Inline

Groepeer selectievakjes of radioknoppen op dezelfde horizontale rij door .form-check-inline aan een .form-check toe te voegen.

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 (uitgeschakeld)</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 (uitgeschakeld)</label>
</div>

Omgekeerd

Zet je selectievakjes, radioknoppen en switches aan de andere kant met de modifier-klasse .form-check-reverse.

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">
    Omgekeerd selectievakje
  </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">
    Uitgeschakeld omgekeerd selectievakje
  </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">Omgekeerd switch-selectievakje</label>
</div>

Zonder labels

Laat de omhullende .form-check weg bij selectievakjes en radioknoppen zonder labeltekst. Vergeet niet alsnog een toegankelijke naam voor hulptechnologieën te bieden (bijvoorbeeld met aria-label). Zie het onderdeel toegankelijkheid in het formulieroverzicht voor details.

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>

Toggle-knoppen

Maak knopachtige selectievakjes en radioknoppen door op de <label>-elementen .btn-stijlen te gebruiken in plaats van .form-check-label. Deze toggle-knoppen kunnen zo nodig verder worden gegroepeerd in een button group.

Toggle-knoppen met selectievakje

HTML

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

HTML

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

Let op

Visueel zijn deze toggle-knoppen met selectievakje identiek aan de toggle-knoppen van de button-plugin. Ze worden echter anders overgebracht door hulptechnologieën: de selectievakje-toggles worden door schermlezers aangekondigd als "aangevinkt"/"niet aangevinkt" (omdat het ondanks hun uiterlijk in de kern nog steeds selectievakjes zijn), terwijl de toggle-knoppen van de button-plugin worden aangekondigd als "knop"/"knop ingedrukt". De keuze tussen deze twee aanpakken hangt af van het soort toggle dat je maakt, en of de toggle voor gebruikers logisch is wanneer die als selectievakje of juist als echte knop wordt aangekondigd.

Toggle-knoppen met radioknop

HTML

<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Aangevinkt</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">Uitgeschakeld</label>

<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-secondary" for="option4">Radio</label>

Outline-stijlen

Verschillende varianten van .btn, zoals de diverse outline-stijlen, worden ondersteund.

HTML

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Enkele 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">Aangevinkt</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">Aangevinkte success-radioknop</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-radioknop</label>

Sass

Variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.