Retour

Case à cocher (checkbox)

La case à cocher permet à l’utilisateur de sélectionner une ou plusieurs options dans une liste. Elle est utilisée 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

Dépréciation

Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes

Ensemble de cases à cocher

Légende pour l’ensemble de champs

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

Ensemble de cases à cocher, petite taille

Légende pour l’ensemble de champs

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

Ensemble de cases à cocher désactivées

Légende pour l’ensemble de champs

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

Ensemble de cases à cocher en ligne

Légende pour l’ensemble de champs

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

Ensemble de cases à cocher avec texte d‘aide

Légende pour l’ensemble de champs

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

Ensemble de cases à cocher avec erreur

Légende pour l’ensemble de champs

Texte d’erreur obligatoire

<div class="village-form-group">
    <fieldset class="village-fieldset village-fieldset--error" aria-labelledby="checkboxes-error-legend checkboxes-error-desc-error" role="group">
        <legend class="village-fieldset__legend village-text--regular" id='checkboxes-error-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="village-fieldset__content">
            <div class="village-checkbox-group">
                <input name="checkboxes-error-1" id="checkboxes-error-1" type="checkbox" aria-describedby="checkboxes-error-1-messages">
                <label class="village-label" for="checkboxes-error-1">
                    Label checkbox
                </label>
                <div class="village-messages-group" id="checkboxes-error-1-messages" aria-live="polite">
                </div>
            </div>
            <div class="village-checkbox-group">
                <input name="checkboxes-error-2" id="checkboxes-error-2" type="checkbox" aria-describedby="checkboxes-error-2-messages">
                <label class="village-label" for="checkboxes-error-2">
                    Label checkbox
                </label>
                <div class="village-messages-group" id="checkboxes-error-2-messages" aria-live="polite">
                </div>
            </div>
            <div class="village-checkbox-group">
                <input name="checkboxes-error-3" id="checkboxes-error-3" type="checkbox" aria-describedby="checkboxes-error-3-messages">
                <label class="village-label" for="checkboxes-error-3">
                    Label checkbox
                </label>
                <div class="village-messages-group" id="checkboxes-error-3-messages" aria-live="polite">
                </div>
            </div>
        </div>
        <p id="checkboxes-error-desc-error" class="village-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="village-form-group">
    <fieldset class="village-fieldset village-fieldset--valid" aria-labelledby="checkboxes-valid-legend checkboxes-valid-desc-valid" role="group">
        <legend class="village-fieldset__legend village-text--regular" id='checkboxes-valid-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="village-fieldset__content">
            <div class="village-checkbox-group">
                <input name="checkboxes-valid-1" id="checkboxes-valid-1" type="checkbox" aria-describedby="checkboxes-valid-1-messages">
                <label class="village-label" for="checkboxes-valid-1">
                    Label checkbox
                </label>
                <div class="village-messages-group" id="checkboxes-valid-1-messages" aria-live="polite">
                </div>
            </div>
            <div class="village-checkbox-group">
                <input name="checkboxes-valid-2" id="checkboxes-valid-2" type="checkbox" aria-describedby="checkboxes-valid-2-messages">
                <label class="village-label" for="checkboxes-valid-2">
                    Label checkbox
                </label>
                <div class="village-messages-group" id="checkboxes-valid-2-messages" aria-live="polite">
                </div>
            </div>
            <div class="village-checkbox-group">
                <input name="checkboxes-valid-3" id="checkboxes-valid-3" type="checkbox" aria-describedby="checkboxes-valid-3-messages">
                <label class="village-label" for="checkboxes-valid-3">
                    Label checkbox
                </label>
                <div class="village-messages-group" id="checkboxes-valid-3-messages" aria-live="polite">
                </div>
            </div>
        </div>
        <p id="checkboxes-valid-desc-valid" class="village-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="village-form-group">
    <fieldset class="village-fieldset village-fieldset--inline village-fieldset--error" aria-labelledby="checkboxes-error-inline-legend checkboxes-error-inline-desc-error" role="group">
        <legend class="village-fieldset__legend village-text--regular" id='checkboxes-error-inline-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="village-fieldset__content">
            <div class="village-checkbox-group">
                <input name="checkboxes-error-inline-1" id="checkboxes-error-inline-1" type="checkbox" aria-describedby="checkboxes-error-inline-1-messages">
                <label class="village-label" for="checkboxes-error-inline-1">
                    Label checkbox
                </label>
                <div class="village-messages-group" id="checkboxes-error-inline-1-messages" aria-live="polite">
                </div>
            </div>
            <div class="village-checkbox-group">
                <input name="checkboxes-error-inline-2" id="checkboxes-error-inline-2" type="checkbox" aria-describedby="checkboxes-error-inline-2-messages">
                <label class="village-label" for="checkboxes-error-inline-2">
                    Label checkbox
                </label>
                <div class="village-messages-group" id="checkboxes-error-inline-2-messages" aria-live="polite">
                </div>
            </div>
            <div class="village-checkbox-group">
                <input name="checkboxes-error-inline-3" id="checkboxes-error-inline-3" type="checkbox" aria-describedby="checkboxes-error-inline-3-messages">
                <label class="village-label" for="checkboxes-error-inline-3">
                    Label checkbox
                </label>
                <div class="village-messages-group" id="checkboxes-error-inline-3-messages" aria-live="polite">
                </div>
            </div>
        </div>
        <p id="checkboxes-error-inline-desc-error" class="village-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="village-form-group">
    <fieldset class="village-fieldset village-fieldset--inline village-fieldset--valid" aria-labelledby="checkboxes-valid-inline-legend checkboxes-valid-inline-desc-valid" role="group">
        <legend class="village-fieldset__legend village-text--regular" id='checkboxes-valid-inline-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="village-fieldset__content">
            <div class="village-checkbox-group">
                <input name="checkboxes-valid-inline-1" id="checkboxes-valid-inline-1" type="checkbox" aria-describedby="checkboxes-valid-inline-1-messages">
                <label class="village-label" for="checkboxes-valid-inline-1">
                    Label checkbox
                </label>
                <div class="village-messages-group" id="checkboxes-valid-inline-1-messages" aria-live="polite">
                </div>
            </div>
            <div class="village-checkbox-group">
                <input name="checkboxes-valid-inline-2" id="checkboxes-valid-inline-2" type="checkbox" aria-describedby="checkboxes-valid-inline-2-messages">
                <label class="village-label" for="checkboxes-valid-inline-2">
                    Label checkbox
                </label>
                <div class="village-messages-group" id="checkboxes-valid-inline-2-messages" aria-live="polite">
                </div>
            </div>
            <div class="village-checkbox-group">
                <input name="checkboxes-valid-inline-3" id="checkboxes-valid-inline-3" type="checkbox" aria-describedby="checkboxes-valid-inline-3-messages">
                <label class="village-label" for="checkboxes-valid-inline-3">
                    Label checkbox
                </label>
                <div class="village-messages-group" id="checkboxes-valid-inline-3-messages" aria-live="polite">
                </div>
            </div>
        </div>
        <p id="checkboxes-valid-inline-desc-valid" class="village-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="village-form-group">
    <fieldset class="village-fieldset">
        <legend class="village-fieldset__legend village-text--regular" id='checkboxes-hint-element-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="village-fieldset__content">
            <div class="village-checkbox-group">
                <input name="checkboxes-hint-element-1" id="checkboxes-hint-element-1" type="checkbox" aria-describedby="checkboxes-hint-element-1-messages">
                <label class="village-label" for="checkboxes-hint-element-1">
                    Label checkbox
                    <span class="village-hint-text">Texte de description additionnel</span>
                </label>
                <div class="village-messages-group" id="checkboxes-hint-element-1-messages" aria-live="polite">
                </div>
            </div>
            <div class="village-checkbox-group">
                <input name="checkboxes-hint-element-2" id="checkboxes-hint-element-2" type="checkbox" aria-describedby="checkboxes-hint-element-2-messages">
                <label class="village-label" for="checkboxes-hint-element-2">
                    Label checkbox
                    <span class="village-hint-text">Texte de description additionnel</span>
                </label>
                <div class="village-messages-group" id="checkboxes-hint-element-2-messages" aria-live="polite">
                </div>
            </div>
            <div class="village-checkbox-group">
                <input name="checkboxes-hint-element-3" id="checkboxes-hint-element-3" type="checkbox" aria-describedby="checkboxes-hint-element-3-messages">
                <label class="village-label" for="checkboxes-hint-element-3">
                    Label checkbox
                    <span class="village-hint-text">Texte de description additionnel</span>
                </label>
                <div class="village-messages-group" id="checkboxes-hint-element-3-messages" aria-live="polite">
                </div>
            </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="village-form-group">
    <fieldset class="village-fieldset">
        <legend class="village-fieldset__legend village-text--regular" id='checkboxes-hint-el-sm-legend'>
            Légende pour l’ensemble de champs
        </legend>
        <div class="village-fieldset__content">
            <div class="village-checkbox-group village-checkbox-group--sm">
                <input name="checkboxes-hint-el-sm-1" id="checkboxes-hint-el-sm-1" type="checkbox" aria-describedby="checkboxes-hint-el-sm-1-messages">
                <label class="village-label" for="checkboxes-hint-el-sm-1">
                    Label checkbox
                    <span class="village-hint-text">Texte de description additionnel</span>
                </label>
                <div class="village-messages-group" id="checkboxes-hint-el-sm-1-messages" aria-live="polite">
                </div>
            </div>
            <div class="village-checkbox-group village-checkbox-group--sm">
                <input name="checkboxes-hint-el-sm-2" id="checkboxes-hint-el-sm-2" type="checkbox" aria-describedby="checkboxes-hint-el-sm-2-messages">
                <label class="village-label" for="checkboxes-hint-el-sm-2">
                    Label checkbox
                    <span class="village-hint-text">Texte de description additionnel</span>
                </label>
                <div class="village-messages-group" id="checkboxes-hint-el-sm-2-messages" aria-live="polite">
                </div>
            </div>
            <div class="village-checkbox-group village-checkbox-group--sm">
                <input name="checkboxes-hint-el-sm-3" id="checkboxes-hint-el-sm-3" type="checkbox" aria-describedby="checkboxes-hint-el-sm-3-messages">
                <label class="village-label" for="checkboxes-hint-el-sm-3">
                    Label checkbox
                    <span class="village-hint-text">Texte de description additionnel</span>
                </label>
                <div class="village-messages-group" id="checkboxes-hint-el-sm-3-messages" aria-live="polite">
                </div>
            </div>
        </div>
    </fieldset>
</div>

Paramètres d’affichage

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