Interface de contrôle des tests
Retour

Cases à cocher (checkboxes)

Les cases à cocher permettent à l’utilisateur de sélectionner une ou plusieurs options dans une liste. Elles sont utilisées pour effectuer des sélections multiples (de 0 à N éléments), ou bien pour permettre un choix binaire, lorsque l’utilisateur peut sélectionner ou désélectionner une seule option.

Documentation

Case à cocher seule

<div class="fr-checkbox-group">
    <input type="checkbox" id="checkbox" name="checkbox">
    <label class="fr-label" for="checkbox">Label checkbox
    </label>
</div>

Case à cocher avec texte d‘aide

<div class="fr-checkbox-group">
    <input type="checkbox" id="checkbox-hint" name="checkbox-hint">
    <label class="fr-label" for="checkbox-hint">Label checkbox
        <span class="fr-hint-text">Texte de description additionnel</span>
    </label>
</div>

Case à cocher seule, validée

Texte de validation 

<div class="fr-checkbox-group fr-checkbox-group--valid">
    <input aria-describedby="checkboxes-valid-desc-valid" type="checkbox" id="checkbox-valid" name="checkbox-valid">
    <label class="fr-label" for="checkbox-valid">Label checkbox
    </label>
    <p id="checkbox-valid-desc-valid" class="fr-valid-text">
        Texte de validation
    </p>
</div>

Case à cocher seule avec erreur

Texte d’erreur obligatoire 

<div class="fr-checkbox-group fr-checkbox-group--error">
    <input aria-describedby="checkboxes-error-desc-error" type="checkbox" id="checkbox-error" name="checkbox-error">
    <label class="fr-label" for="checkbox-error">Label checkbox
    </label>
    <p id="checkbox-error-desc-error" class="fr-error-text">
        Texte d’erreur obligatoire
    </p>
</div>

Ensemble de cases à cocher

Légende pour l’ensemble de champs 

<div class="fr-form-group">
    <fieldset class="fr-fieldset">
        <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-1" name="checkboxes-1">
                <label class="fr-label" for="checkboxes-1">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-2" name="checkboxes-2">
                <label class="fr-label" for="checkboxes-2">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-3" name="checkboxes-3">
                <label class="fr-label" for="checkboxes-3">Label checkbox
                </label>
            </div>
        </div>
    </fieldset>
</div>

Ensemble de cases à cocher, petite taille

Légende pour l’ensemble de champs 

<div class="fr-form-group">
    <fieldset class="fr-fieldset">
        <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-small-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group fr-checkbox-group--sm">
                <input type="checkbox" id="checkboxes-small-1" name="checkboxes-small-1">
                <label class="fr-label" for="checkboxes-small-1">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group fr-checkbox-group--sm">
                <input type="checkbox" id="checkboxes-small-2" name="checkboxes-small-2">
                <label class="fr-label" for="checkboxes-small-2">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group fr-checkbox-group--sm">
                <input type="checkbox" id="checkboxes-small-3" name="checkboxes-small-3">
                <label class="fr-label" for="checkboxes-small-3">Label checkbox
                </label>
            </div>
        </div>
    </fieldset>
</div>

Ensemble de cases à cocher désactivées

Légende pour l’ensemble de champs 

<div class="fr-form-group">
    <fieldset class="fr-fieldset" disabled="disabled">
        <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-disabled-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-disabled-1" name="checkboxes-disabled-1">
                <label class="fr-label" for="checkboxes-disabled-1">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-disabled-2" name="checkboxes-disabled-2">
                <label class="fr-label" for="checkboxes-disabled-2">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-disabled-3" name="checkboxes-disabled-3">
                <label class="fr-label" for="checkboxes-disabled-3">Label checkbox
                </label>
            </div>
        </div>
    </fieldset>
</div>

Ensemble de cases à cocher en ligne

Légende pour l’ensemble de champs 

<div class="fr-form-group">
    <fieldset class="fr-fieldset fr-fieldset--inline">
        <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-inline-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-inline-1" name="checkboxes-inline-1">
                <label class="fr-label" for="checkboxes-inline-1">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-inline-2" name="checkboxes-inline-2">
                <label class="fr-label" for="checkboxes-inline-2">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-inline-3" name="checkboxes-inline-3">
                <label class="fr-label" for="checkboxes-inline-3">Label checkbox
                </label>
            </div>
        </div>
    </fieldset>
</div>

Ensemble de cases à cocher avec texte d‘aide

Légende pour l’ensemble de champs Texte de description additionnel 

<div class="fr-form-group">
    <fieldset class="fr-fieldset">
        <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-hint-legend'>
            Légende pour l’ensemble de champs
            <span class="fr-hint-text">Texte de description additionnel</span>
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-hint-1" name="checkboxes-hint-1">
                <label class="fr-label" for="checkboxes-hint-1">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-hint-2" name="checkboxes-hint-2">
                <label class="fr-label" for="checkboxes-hint-2">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-hint-3" name="checkboxes-hint-3">
                <label class="fr-label" for="checkboxes-hint-3">Label checkbox
                </label>
            </div>
        </div>
    </fieldset>
</div>

Ensemble de cases à cocher avec erreur

Légende pour l’ensemble de champs

Texte d’erreur obligatoire 

<div class="fr-form-group">
    <fieldset class="fr-fieldset fr-fieldset--error" aria-labelledby="checkboxes-error-legend checkboxes-error-desc-error" role="group">
        <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-error-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-error-1" name="checkboxes-error-1">
                <label class="fr-label" for="checkboxes-error-1">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-error-2" name="checkboxes-error-2">
                <label class="fr-label" for="checkboxes-error-2">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-error-3" name="checkboxes-error-3">
                <label class="fr-label" for="checkboxes-error-3">Label checkbox
                </label>
            </div>
        </div>
        <p id="checkboxes-error-desc-error" class="fr-error-text">
            Texte d’erreur obligatoire
        </p>
    </fieldset>
</div>

Ensemble de cases à cocher validées

Légende pour l’ensemble de champs

Texte de validation 

<div class="fr-form-group">
    <fieldset class="fr-fieldset fr-fieldset--valid" aria-labelledby="checkboxes-valid-legend checkboxes-valid-desc-valid" role="group">
        <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-valid-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-valid-1" name="checkboxes-valid-1">
                <label class="fr-label" for="checkboxes-valid-1">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-valid-2" name="checkboxes-valid-2">
                <label class="fr-label" for="checkboxes-valid-2">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-valid-3" name="checkboxes-valid-3">
                <label class="fr-label" for="checkboxes-valid-3">Label checkbox
                </label>
            </div>
        </div>
        <p id="checkboxes-valid-desc-valid" class="fr-valid-text">
            Texte de validation
        </p>
    </fieldset>
</div>

Ensemble de cases à cocher avec erreur, en ligne

Légende pour l’ensemble de champs

Texte d’erreur obligatoire 

<div class="fr-form-group">
    <fieldset class="fr-fieldset fr-fieldset--inline fr-fieldset--error" aria-labelledby="checkboxes-error-inline-legend checkboxes-error-inline-desc-error" role="group">
        <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-error-inline-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-error-inline-1" name="checkboxes-error-inline-1">
                <label class="fr-label" for="checkboxes-error-inline-1">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-error-inline-2" name="checkboxes-error-inline-2">
                <label class="fr-label" for="checkboxes-error-inline-2">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-error-inline-3" name="checkboxes-error-inline-3">
                <label class="fr-label" for="checkboxes-error-inline-3">Label checkbox
                </label>
            </div>
        </div>
        <p id="checkboxes-error-inline-desc-error" class="fr-error-text">
            Texte d’erreur obligatoire
        </p>
    </fieldset>
</div>

Ensemble de cases à cocher validées, en ligne

Légende pour l’ensemble de champs

Texte de validation 

<div class="fr-form-group">
    <fieldset class="fr-fieldset fr-fieldset--inline fr-fieldset--valid" aria-labelledby="checkboxes-valid-inline-legend checkboxes-valid-inline-desc-valid" role="group">
        <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-valid-inline-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-valid-inline-1" name="checkboxes-valid-inline-1">
                <label class="fr-label" for="checkboxes-valid-inline-1">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-valid-inline-2" name="checkboxes-valid-inline-2">
                <label class="fr-label" for="checkboxes-valid-inline-2">Label checkbox
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-valid-inline-3" name="checkboxes-valid-inline-3">
                <label class="fr-label" for="checkboxes-valid-inline-3">Label checkbox
                </label>
            </div>
        </div>
        <p id="checkboxes-valid-inline-desc-valid" class="fr-valid-text">
            Texte de validation
        </p>
    </fieldset>
</div>

Ensemble de cases à cocher avec texte d‘aide spécifique

Légende pour l’ensemble de champs 

<div class="fr-form-group">
    <fieldset class="fr-fieldset">
        <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-hint-element-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-hint-element-1" name="checkboxes-hint-element-1">
                <label class="fr-label" for="checkboxes-hint-element-1">Label checkbox
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-hint-element-2" name="checkboxes-hint-element-2">
                <label class="fr-label" for="checkboxes-hint-element-2">Label checkbox
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
            </div>
            <div class="fr-checkbox-group">
                <input type="checkbox" id="checkboxes-hint-element-3" name="checkboxes-hint-element-3">
                <label class="fr-label" for="checkboxes-hint-element-3">Label checkbox
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
            </div>
        </div>
    </fieldset>
</div>

Ensemble de cases à cocher avec texte d‘aide spécifique, petite taille

Légende pour l’ensemble de champs 

<div class="fr-form-group">
    <fieldset class="fr-fieldset">
        <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-hint-el-sm-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="fr-fieldset__content">
            <div class="fr-checkbox-group fr-checkbox-group--sm">
                <input type="checkbox" id="checkboxes-hint-el-sm-1" name="checkboxes-hint-el-sm-1">
                <label class="fr-label" for="checkboxes-hint-el-sm-1">Label checkbox
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
            </div>
            <div class="fr-checkbox-group fr-checkbox-group--sm">
                <input type="checkbox" id="checkboxes-hint-el-sm-2" name="checkboxes-hint-el-sm-2">
                <label class="fr-label" for="checkboxes-hint-el-sm-2">Label checkbox
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
            </div>
            <div class="fr-checkbox-group fr-checkbox-group--sm">
                <input type="checkbox" id="checkboxes-hint-el-sm-3" name="checkboxes-hint-el-sm-3">
                <label class="fr-label" for="checkboxes-hint-el-sm-3">Label checkbox
                    <span class="fr-hint-text">Texte de description additionnel</span>
                </label>
            </div>
        </div>
    </fieldset>
</div>