Boutons radio — Lumy UI

Bouton radio seul

Un bouton radio peut être affiché seul, mais il doit généralement faire partie d’un groupe partageant le même attribut name.

Activer cette option

HTML

<div class="lumy-radio">
    <input
        class="lumy-radio__input"
        id="radio-option"
        name="radio-group"
        type="radio"
        value="option"
    >

    <label
        class="lumy-radio__label"
        for="radio-option"
    >
        Activer cette option
    </label>
</div>

Groupe de boutons radio

Regroupez les options dans un <fieldset> avec une <legend>. Toutes les options du groupe doivent partager le même attribut name.

Choisissez une formule

Essentiel

Professionnel

Entreprise

HTML

<fieldset
    class="lumy-fieldset"
    aria-describedby="radio-plan-messages"
>
    <legend class="lumy-fieldset__legend">
        Choisissez une formule
    </legend>

    <div class="lumy-fieldset__content">
        <div class="lumy-fieldset__element">
            <div class="lumy-radio">
                <input
                    class="lumy-radio__input"
                    id="radio-free"
                    name="plan"
                    type="radio"
                    value="free"
                >

                <label
                    class="lumy-radio__label"
                    for="radio-free"
                >
                    Essentiel
                </label>
            </div>
        </div>

        <div class="lumy-fieldset__element">
            <div class="lumy-radio">
                <input
                    class="lumy-radio__input"
                    id="radio-pro"
                    name="plan"
                    type="radio"
                    value="pro"
                >

                <label
                    class="lumy-radio__label"
                    for="radio-pro"
                >
                    Professionnel
                </label>
            </div>
        </div>

        <div class="lumy-fieldset__element">
            <div class="lumy-radio">
                <input
                    class="lumy-radio__input"
                    id="radio-enterprise"
                    name="plan"
                    type="radio"
                    value="enterprise"
                >

                <label
                    class="lumy-radio__label"
                    for="radio-enterprise"
                >
                    Entreprise
                </label>
            </div>
        </div>
    </div>

    <div
        class="lumy-fieldset__messages"
        id="radio-plan-messages"
        aria-live="polite"
    ></div>
</fieldset>

Textes d’aide

Une indication peut être associée à l’ensemble du groupe ou à chacune des options.

Choisissez votre capacité de stockage Vous pourrez modifier cette option ultérieurement.

10 Go Pour un usage personnel occasionnel.

100 Go Pour les documents, photos et projets réguliers.

1 To Pour les équipes et les fichiers volumineux.

HTML

<fieldset
    class="lumy-fieldset"
    aria-describedby="storage-hint storage-messages"
>
    <legend class="lumy-fieldset__legend">
        Choisissez votre capacité de stockage

        <span
            class="lumy-fieldset__hint"
            id="storage-hint"
        >
            Vous pourrez modifier cette option ultérieurement.
        </span>
    </legend>

    <div class="lumy-fieldset__content">
        <div class="lumy-fieldset__element">
            <div class="lumy-radio">
                <input
                    class="lumy-radio__input"
                    id="storage-10"
                    name="storage"
                    type="radio"
                    value="10"
                >

                <label
                    class="lumy-radio__label"
                    for="storage-10"
                >
                    10 Go

                    <span class="lumy-radio__hint">
                        Pour un usage personnel occasionnel.
                    </span>
                </label>
            </div>
        </div>

        <div class="lumy-fieldset__element">
            <div class="lumy-radio">
                <input
                    class="lumy-radio__input"
                    id="storage-100"
                    name="storage"
                    type="radio"
                    value="100"
                >

                <label
                    class="lumy-radio__label"
                    for="storage-100"
                >
                    100 Go

                    <span class="lumy-radio__hint">
                        Pour les documents et les photos.
                    </span>
                </label>
            </div>
        </div>
    </div>

    <div
        class="lumy-fieldset__messages"
        id="storage-messages"
        aria-live="polite"
    ></div>
</fieldset>

Disposition horizontale

Ajoutez .lumy-fieldset--inline au fieldset pour afficher les choix sur une ligne. Les options repassent automatiquement en colonne sur les petits écrans.

Fréquence de facturation

Mensuelle

Annuelle

Paiement unique

HTML

<fieldset
    class="lumy-fieldset lumy-fieldset--inline"
>
    <legend class="lumy-fieldset__legend">
        Fréquence de facturation
    </legend>

    <div class="lumy-fieldset__content">
        <div class="lumy-fieldset__element">
            <div class="lumy-radio">
                <input
                    class="lumy-radio__input"
                    id="billing-month"
                    name="billing"
                    type="radio"
                    value="month"
                >

                <label
                    class="lumy-radio__label"
                    for="billing-month"
                >
                    Mensuelle
                </label>
            </div>
        </div>

        <div class="lumy-fieldset__element">
            <div class="lumy-radio">
                <input
                    class="lumy-radio__input"
                    id="billing-year"
                    name="billing"
                    type="radio"
                    value="year"
                >

                <label
                    class="lumy-radio__label"
                    for="billing-year"
                >
                    Annuelle
                </label>
            </div>
        </div>
    </div>
</fieldset>

Petite taille

Utilisez .lumy-radio--sm pour les interfaces compactes.

Densité de l’interface

Normale

Compacte

HTML

<div class="lumy-radio lumy-radio--sm">
    <input
        class="lumy-radio__input"
        id="radio-compact"
        name="density"
        type="radio"
        value="compact"
    >

    <label
        class="lumy-radio__label"
        for="radio-compact"
    >
        Compacte
    </label>
</div>

États

Les groupes peuvent être désactivés, invalides ou valides.

Groupe désactivé

Première option

Deuxième option

HTML — Désactivé

<fieldset class="lumy-fieldset" disabled>
    <legend class="lumy-fieldset__legend">
        Groupe désactivé
    </legend>

    <div class="lumy-fieldset__content">
        <div class="lumy-radio">
            <input
                class="lumy-radio__input"
                id="disabled-1"
                name="disabled-group"
                type="radio"
                value="one"
            >

            <label
                class="lumy-radio__label"
                for="disabled-1"
            >
                Première option
            </label>
        </div>
    </div>
</fieldset>

Choisissez un moyen de paiement

Carte bancaire

Virement bancaire

Sélectionnez un moyen de paiement.

HTML — Erreur

<fieldset
    class="lumy-fieldset lumy-fieldset--error"
    aria-invalid="true"
    aria-describedby="payment-error"
>
    <legend class="lumy-fieldset__legend">
        Choisissez un moyen de paiement
    </legend>

    <div class="lumy-fieldset__content">
        <div class="lumy-radio">
            <input
                class="lumy-radio__input"
                id="payment-card"
                name="payment"
                type="radio"
                value="card"
            >

            <label
                class="lumy-radio__label"
                for="payment-card"
            >
                Carte bancaire
            </label>
        </div>
    </div>

    <div
        class="lumy-fieldset__messages"
        aria-live="polite"
    >
        <p
            class="lumy-fieldset__message
                   lumy-fieldset__message--error"
            id="payment-error"
        >
            Sélectionnez un moyen de paiement.
        </p>
    </div>
</fieldset>

Moyen de contact préféré

E-mail

Téléphone

Votre préférence a été enregistrée.

HTML — Valide

<fieldset
    class="lumy-fieldset lumy-fieldset--valid"
    aria-describedby="contact-valid"
>
    <legend class="lumy-fieldset__legend">
        Moyen de contact préféré
    </legend>

    <div class="lumy-fieldset__content">
        <div class="lumy-radio">
            <input
                class="lumy-radio__input"
                id="contact-email"
                name="contact"
                type="radio"
                value="email"
                checked
            >

            <label
                class="lumy-radio__label"
                for="contact-email"
            >
                E-mail
            </label>
        </div>
    </div>

    <div
        class="lumy-fieldset__messages"
        aria-live="polite"
    >
        <p
            class="lumy-fieldset__message
                   lumy-fieldset__message--valid"
            id="contact-valid"
        >
            Votre préférence a été enregistrée.
        </p>
    </div>
</fieldset>

Cartes radio enrichies

La variante .lumy-radio--rich transforme chaque option en carte sélectionnable. Utilisez .lumy-fieldset--cards pour les organiser en grille.

Choisissez votre espace Lumy Une seule destination peut être sélectionnée.

Personnel Pour vos fichiers, notes et projets individuels.

Équipe Pour collaborer et partager des ressources.

Éducation Pour les établissements, classes et étudiants.

HTML

<fieldset
    class="lumy-fieldset lumy-fieldset--cards
           lumy-fieldset--cards-3"
>
    <legend class="lumy-fieldset__legend">
        Choisissez votre espace Lumy
    </legend>

    <div class="lumy-fieldset__content">
        <div class="lumy-fieldset__element">
            <div class="lumy-radio lumy-radio--rich">
                <input
                    class="lumy-radio__input"
                    id="space-personal"
                    name="space"
                    type="radio"
                    value="personal"
                >

                <label
                    class="lumy-radio__label"
                    for="space-personal"
                >
                    <span class="lumy-radio__content">
                        <span class="lumy-radio__title">
                            Personnel
                        </span>

                        <span
                            class="lumy-radio__description"
                        >
                            Pour vos fichiers et projets
                            individuels.
                        </span>
                    </span>

                    <span
                        class="lumy-radio__pictogram"
                        aria-hidden="true"
                    >
                        👤
                    </span>
                </label>
            </div>
        </div>

        <div class="lumy-fieldset__element">
            <div class="lumy-radio lumy-radio--rich">
                <input
                    class="lumy-radio__input"
                    id="space-team"
                    name="space"
                    type="radio"
                    value="team"
                >

                <label
                    class="lumy-radio__label"
                    for="space-team"
                >
                    <span class="lumy-radio__content">
                        <span class="lumy-radio__title">
                            Équipe
                        </span>

                        <span
                            class="lumy-radio__description"
                        >
                            Pour collaborer et partager des
                            ressources.
                        </span>
                    </span>

                    <span
                        class="lumy-radio__pictogram"
                        aria-hidden="true"
                    >
                        👥
                    </span>
                </label>
            </div>
        </div>
    </div>
</fieldset>

Accessibilité

Regroupez les choix liés dans un <fieldset> possédant une <legend> descriptive.
Chaque champ doit avoir un identifiant unique et un <label> dont l’attribut for reprend cet identifiant.
Toutes les options d’un même groupe doivent partager le même attribut name.
La touche Tab place le focus dans le groupe. Les touches fléchées permettent ensuite de changer la sélection.
Pour une erreur de groupe, utilisez aria-invalid="true" sur le <fieldset> et référencez le message avec aria-describedby.
N’utilisez pas les boutons radio lorsque plusieurs réponses peuvent être choisies. Employez alors des cases à cocher.
Évitez de présélectionner une option lorsque le choix implique un consentement ou une décision importante.