DSFR v1.12.0

Retour

Contrôle segmenté (segmented)

Le composant "contrôle segmenté" incite l'utilisateur à choisir entre plusieurs options d'affichage disponibles (vues), mutuellement exclusives avec une valeur sélectionnée par défaut.

Documentation

Contrôle segmenté simple

Légende 

<fieldset class="fr-segmented">
    <legend class="fr-segmented__legend">
        Légende
    </legend>
    <div class="fr-segmented__elements">
        <div class="fr-segmented__element">
            <input value="1" type="radio" id="segmented-2459-1" name="segmented-2459">
            <label class="fr-label" for="segmented-2459-1">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="2" checked type="radio" id="segmented-2459-2" name="segmented-2459">
            <label class="fr-label" for="segmented-2459-2">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="3" type="radio" id="segmented-2459-3" name="segmented-2459">
            <label class="fr-label" for="segmented-2459-3">
                Libellé
            </label>
        </div>
    </div>
</fieldset>

Contrôle segmenté taille SM

Légende 

<fieldset class="fr-segmented fr-segmented--sm">
    <legend class="fr-segmented__legend">
        Légende
    </legend>
    <div class="fr-segmented__elements">
        <div class="fr-segmented__element">
            <input value="1" type="radio" id="segmented-2462-1" name="segmented-2462">
            <label class="fr-label" for="segmented-2462-1">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="2" checked type="radio" id="segmented-2462-2" name="segmented-2462">
            <label class="fr-label" for="segmented-2462-2">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="3" type="radio" id="segmented-2462-3" name="segmented-2462">
            <label class="fr-label" for="segmented-2462-3">
                Libellé
            </label>
        </div>
    </div>
</fieldset>

Contrôle segmenté avec légende en ligne

Légende 

<fieldset class="fr-segmented">
    <legend class="fr-segmented__legend fr-segmented__legend--inline">
        Légende
    </legend>
    <div class="fr-segmented__elements">
        <div class="fr-segmented__element">
            <input value="1" type="radio" id="segmented-2465-1" name="segmented-2465">
            <label class="fr-label" for="segmented-2465-1">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="2" checked type="radio" id="segmented-2465-2" name="segmented-2465">
            <label class="fr-label" for="segmented-2465-2">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="3" type="radio" id="segmented-2465-3" name="segmented-2465">
            <label class="fr-label" for="segmented-2465-3">
                Libellé
            </label>
        </div>
    </div>
</fieldset>

Contrôle segmenté avec texte d'aide

Légende texte additionel 

<fieldset class="fr-segmented">
    <legend class="fr-segmented__legend">
        Légende
        <span class="fr-hint-text">texte additionel</span>
    </legend>
    <div class="fr-segmented__elements">
        <div class="fr-segmented__element">
            <input value="1" type="radio" id="segmented-2468-1" name="segmented-2468">
            <label class="fr-label" for="segmented-2468-1">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="2" checked type="radio" id="segmented-2468-2" name="segmented-2468">
            <label class="fr-label" for="segmented-2468-2">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="3" type="radio" id="segmented-2468-3" name="segmented-2468">
            <label class="fr-label" for="segmented-2468-3">
                Libellé
            </label>
        </div>
    </div>
</fieldset>

Contrôle segmenté avec icônes

Légende 

<fieldset class="fr-segmented">
    <legend class="fr-segmented__legend">
        Légende
    </legend>
    <div class="fr-segmented__elements">
        <div class="fr-segmented__element">
            <input value="1" type="radio" id="segmented-2471-1" name="segmented-2471">
            <label class="fr-icon-road-map-line fr-label" for="segmented-2471-1">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="2" checked type="radio" id="segmented-2471-2" name="segmented-2471">
            <label class="fr-icon-road-map-line fr-label" for="segmented-2471-2">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="3" type="radio" id="segmented-2471-3" name="segmented-2471">
            <label class="fr-icon-road-map-line fr-label" for="segmented-2471-3">
                Libellé
            </label>
        </div>
    </div>
</fieldset>

Contrôle segmenté sans légende

Légende 

<fieldset class="fr-segmented fr-segmented--no-legend">
    <legend class="fr-segmented__legend">
        Légende
    </legend>
    <div class="fr-segmented__elements">
        <div class="fr-segmented__element">
            <input value="1" type="radio" id="segmented-2474-1" name="segmented-2474">
            <label class="fr-label" for="segmented-2474-1">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="2" checked type="radio" id="segmented-2474-2" name="segmented-2474">
            <label class="fr-label" for="segmented-2474-2">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="3" type="radio" id="segmented-2474-3" name="segmented-2474">
            <label class="fr-label" for="segmented-2474-3">
                Libellé
            </label>
        </div>
    </div>
</fieldset>

Contrôle segmenté désactivé

Légende 

<fieldset class="fr-segmented">
    <legend class="fr-segmented__legend">
        Légende
    </legend>
    <div class="fr-segmented__elements">
        <div class="fr-segmented__element">
            <input value="1" type="radio" id="segmented-2477-1" name="segmented-2477">
            <label class="fr-label" for="segmented-2477-1">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="2" checked type="radio" id="segmented-2477-2" name="segmented-2477">
            <label class="fr-label" for="segmented-2477-2">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="3" disabled type="radio" id="segmented-2477-3" name="segmented-2477">
            <label class="fr-label" for="segmented-2477-3">
                Libellé
            </label>
        </div>
    </div>
</fieldset>

Contrôle segmenté cas maximum (non recommandé)

Lorsque la largeur du contrôle segmenté dépasse celle de son conteneur, la légende ne reste pas sur la même ligne. Si cela ne rentre toujours pas, les boutons passent en vertical. Réduisez la fenêtre pour voir le comportement de ce script.

Légende 

<fieldset class="fr-segmented">
    <legend class="fr-segmented__legend fr-segmented__legend--inline">
        Légende
    </legend>
    <div class="fr-segmented__elements">
        <div class="fr-segmented__element">
            <input value="1" type="radio" id="segmented-max-1" name="segmented-max">
            <label class="fr-icon-star-line fr-label" for="segmented-max-1">
                Libellé long
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="2" checked type="radio" id="segmented-max-2" name="segmented-max">
            <label class="fr-icon-time-line fr-label" for="segmented-max-2">
                Libellé trop long
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="3" type="radio" id="segmented-max-3" name="segmented-max">
            <label class="fr-icon-road-map-line fr-label" for="segmented-max-3">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="4" type="radio" id="segmented-max-4" name="segmented-max">
            <label class="fr-icon-road-map-line fr-label" for="segmented-max-4">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="5" type="radio" id="segmented-max-5" name="segmented-max">
            <label class="fr-icon-road-map-line fr-label" for="segmented-max-5">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="6" type="radio" id="segmented-max-6" name="segmented-max">
            <label class="fr-icon-road-map-line fr-label" for="segmented-max-6">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="7" type="radio" id="segmented-max-7" name="segmented-max">
            <label class="fr-icon-road-map-line fr-label" for="segmented-max-7">
                Libellé
            </label>
        </div>
        <div class="fr-segmented__element">
            <input value="8" type="radio" id="segmented-max-8" name="segmented-max">
            <label class="fr-icon-road-map-line fr-label" for="segmented-max-8">
                Libellé
            </label>
        </div>
    </div>
</fieldset>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.