Permet de réaliser un choix parmi une liste. De fait, un bouton radio n’apparaît jamais seul et appartient nécessairement à un groupe de boutons radio. Lorsqu’un utilisateur choisit un nouvel élément, le choix précédent est automatiquement désélectionné.
Documentation : Figma
Langage: HTML
<div role="group" aria-labelledby="legend_782403018">
<div class="legend-container" id="legend-container_298933059">
<p class="form-legend" id="legend_782403018">Légende du groupe<span class="required"> *</span></p>
</div>
<div class="form-check with-checked-bg">
<input aria-disabled="true" class="form-check-input" id="form-radio_475006405" name="form-radio_212804519" data-ft-tooltip="Tooltip qui explique pourquoi le champ est désactivé" data-ft-placement="bottom" data-ft-vocalize="false" type="radio" value="1">
<label class="form-check-label" for="form-radio_475006405">
Libellé de l'élément</label>
</div>
<div class="form-check with-checked-bg">
<input checked="checked" class="form-check-input" id="form-radio_555744499" name="form-radio_212804519" type="radio" value="value_487152787">
<label class="form-check-label" for="form-radio_555744499">
Libellé de l'élément</label>
</div>
<div class="form-check with-checked-bg">
<input class="form-check-input" id="form-radio_764066242" name="form-radio_212804519" type="radio" value="value_398942571">
<label class="form-check-label" for="form-radio_764066242">
Libellé de l'élément</label>
</div>
</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();
});
}
}
});