Radio card: Groupe

Choix de l'univers FT

Radio card Carte case à cocher

Champ de formulaire utilisé pour sélectionner une ou plusieurs valeurs dans la liste.

Documentation : Figma

Langage:  HTML 

<div aria-labelledby="legend_456992642" id="fieldset_907735136" role="group">
    <div class="legend-container">
        <p class="form-legend" id="legend_456992642">Légende du groupe<span class="required">&nbsp;*</span><span class="sr-only">, Erreur:&nbsp;Message d'erreur</span></p><button class="btn-ratio-square btn btn-help" id="button_116774619" data-ft-modal-toggle="id-de-la-fenetre-modale" type="button" data-ft-tooltip="Aide à propos de &quot;Libellé de l&#39;élément&quot;" data-ft-vocalize="false">
            <span aria-hidden="true" class="icon icon-question"></span>
            <span class="sr-only">Aide à propos de "Libellé de l'élément"</span>
        </button>
        <p aria-hidden="true" class="help-block invalid-feedback">
            <span class="sr-only">Erreur:&nbsp;</span>Message d'erreur
        </p>
    </div>
    <div class="ds-check-card">
        <div class="ds-check-card-left">
            <div class="form-check">
                <input class="form-check-input" id="form-radio_810694663" name="radio-card" type="radio" value="value_992690369">

                <label class="form-check-label sr-only" for="form-radio_810694663">
                    Libellé de l'élément 1</label>
            </div>
        </div>
        <div class="ds-check-card-right">
            <p class="mb-0 emphasis" aria-hidden="true">Libellé de l'élément 1</p>
            <p class="mb-0 text-gray-70">Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
    <div class="ds-check-card">
        <div class="ds-check-card-left">
            <div class="form-check">
                <input class="form-check-input" id="form-radio_162238728" name="radio-card" type="radio" value="value_926090744">

                <label class="form-check-label sr-only" for="form-radio_162238728">
                    Libellé de l'élément 2</label>
            </div>
        </div>
        <div class="ds-check-card-right">
            <p class="mb-0 emphasis" aria-hidden="true">Libellé de l'élément 2</p>
            <p class="mb-0 text-gray-70">Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
    <div class="ds-check-card">
        <div class="ds-check-card-left">
            <div class="form-check">
                <input class="form-check-input" id="form-radio_302463595" name="radio-card" type="radio" value="value_45333823">

                <label class="form-check-label sr-only" for="form-radio_302463595">
                    Libellé de l'élément 3</label>
            </div>
        </div>
        <div class="ds-check-card-right">
            <p class="mb-0 emphasis" aria-hidden="true">Libellé de l'élément 3</p>
            <p class="mb-0 text-gray-70">Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
</div>
  • URL Preview : /js/disabled-a11y.js
  • Chemin d'accès : public/js/disabled-a11y.js
  • Taille : 824 Bytes
  • Contenu : 
    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();
            });
        }
    }
});