Checks & Radios ^commun

Possibilité de créer des cases à cocher (type="checkbox") et boutons radio (type="radio") cohérents grâce au skins paramétrés.
Via l'ajout de la classe .form-check, les checkbox et radio sont "améliorés", permettant la personnalisation et une compatibilité multi navigateurs.
Pour rappel, les cases à cocher permettent de sélectionner une ou plusieurs options dans une liste alors que les boutons radio permettent de n'en sélectionner qu'un seul.

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkDefault">
    <label class="form-check-label" for="checkDefault">Default checkbox</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkChecked" checked>
    <label class="form-check-label" for="checkChecked">Checked checkbox</label>
</div>

Les cases à cocher peuvent utiliser la pseudo-classe :indeterminate via JavaScript.

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkIndeterminate">
    <label class="form-check-label" for="checkIndeterminate">Indeterminate checkbox</label>
</div>

Ajouter l'attribut disabled sur les label afin qu'ils soient skinnés avec une couleur plus claire.

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkIndeterminateDisabled" disabled>
    <label class="form-check-label" for="checkIndeterminateDisabled">Disabled indeterminate checkbox</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkDisabled" disabled>
    <label class="form-check-label" for="checkDisabled">Disabled checkbox</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkCheckedDisabled" checked disabled>
    <label class="form-check-label" for="checkCheckedDisabled">Disabled checked checkbox</label>
</div>

<div class="form-check">
    <input class="form-check-input" type="radio" name="radioDefault" id="radioDefault1">
    <label class="form-check-label" for="radioDefault1">Default radio</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="radioDefault" id="radioDefault2" checked>
    <label class="form-check-label" for="radioDefault2">Default checked radio</label>
</div>

Ajouter l'attribut disabled sur les label afin qu'ils soient skinnés avec une couleur plus claire.

<div class="form-check">
    <input class="form-check-input" type="radio" name="radioDisabled" id="radioDisabled" disabled>
    <label class="form-check-label" for="radioDisabled">Disabled radio</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="radioDisabled" id="radioCheckedDisabled" checked disabled>
    <label class="form-check-label" for="radioCheckedDisabled">Disabled checked radio</label>
</div>

On utilise la classe .form-switch sur le conteneur et role="switch" sur l'input qui aura également la classe .form-check-input.
L'attribut disabled est également pris en charge.

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="switchCheckDefault">
    <label class="form-check-label" for="switchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
    <label class="form-check-label" for="switchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="switchCheckDisabled" disabled>
    <label class="form-check-label" for="switchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="switchCheckCheckedDisabled" checked disabled>
    <label class="form-check-label" for="switchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Par défaut, les cases à cocher et les boutons radio qui sont au même niveau (siblings) sont empilés verticalement et espacés de manière appropriée avec .form-check.

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

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

Il est possible de regrouper les cases à cocher ou les boutons radio sur une même ligne horizontale en ajoutant .form-check-inline à n'importe quel .form-check.

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

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

Placer vos cases à cocher, vos boutons radio et vos switches du côté opposé en utilisant la classe .form-check-reverse.

<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="switchCheckReverse">
    <label class="form-check-label" for="switchCheckReverse">Reverse switch checkbox input</label>
</div>

Dans ce cas, ne pas oublier de mettre des aria-label pour l'accessibilité et retirer .form-check de la div parente.

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

Possibilité de créer des cases à cocher et des boutons radio en utilisant .btn plutôt que .form-check-label.
Ces boutons peuvent être regroupés dans un groupe de bouton (voir la page dédiée) si nécessaire.

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

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

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

Autre exemple :

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

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

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

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

Autre exemple :

<input type="radio" class="btn-check" name="options-base" id="option5" autocomplete="off" checked>
<label class="btn" for="option5">Checked</label>

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

<input type="radio" class="btn-check" name="options-base" id="option7" autocomplete="off" disabled>
<label class="btn" for="option7">Disabled</label>

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

Quelques variantes de styles de boutons sont compatibles.

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

$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:                 var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
$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:       $focus-ring-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;

Et concernant les switches :

$form-switch-color:               rgba($black, .25);
$form-switch-width:               2em;
$form-switch-padding-start:       $form-switch-width + .5em;
$form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>");
$form-switch-border-radius:       $form-switch-width;
$form-switch-transition:          background-position .15s ease-in-out;

$form-switch-focus-color:         $input-focus-border-color;
$form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>");

$form-switch-checked-color:       $component-active-color;
$form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>");
$form-switch-checked-bg-position: right center;