Basculer rapidement entre deux états possibles. Le composant indique donc si une fonctionnalité est activée ou non. Il est donc utilisé si la réponse est du type “marche / arrêt”.
Documentation : Figma
Langage: HTML
<div class="custom-control custom-switch">
<input aria-disabled="true" checked="checked" class="custom-control-input form-switch-input" id="toggle-switch_639246588" name="toggle-switch_639246588" required role="switch" data-ft-tooltip="Infobulle expliquant pourquoi l'élément est désactivé" data-ft-placement="bottom" type="checkbox" value="">
<label class="custom-control-label" for="toggle-switch_639246588">
Libellé de l'élément<span class="required"> *</span></label>
</div>
// L'aperçu n'est pas disponible pour les dépendances externes
window.addEventListener('load', function () {
/**
* Désactivation du clic sur les input disabled
*/
// On liste les input disabled
const disabledInputs = document.querySelectorAll('[aria-disabled="true"]');
for (const input of disabledInputs) {
// Pour chaque input on empêche le click
input.addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
});
// Pour chaque label associé, on empêche le click
const label = document.querySelector('[for="' + input.id + '"]');
if (label) {
document.querySelector('[for="' + input.id + '"]').addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
});
}
}
});