Champ obligatoire

    Le champ obligatoire est un indicateur visuel qui précise qu’un ou des éléments doivent être remplis obligatoirement pour la réussite de la tâche.

    Exemple


    Quand l'utiliser

    La composante s’utilise dans les formulaires ou aux endroits qui demandent la complétion d’un élément de formulaire pour compléter la tâche. Le champ obligatoire peut s'appliquer à toutes les composantes de formulaire : champs textes, boutons de sélection, boutons radio, cases à cocher, etc.

    L’usage du champ obligatoire est à éviter dans certains cas, par exemple dans les pages de connexion où il est demandé d'entrer un identifiant et un mot de passe. Dans cette situation, la mention du champ obligatoire n’est pas recommandée puisque la tâche est implicitement obligatoire. On évite ainsi de surcharger des pages inutilement.
     

    Exemple


    Comment l'utiliser

    La composante est constituée de deux éléments : la mention et l'astérisque.

    La mention s’affiche sous le titre du formulaire avec la phrase : « Les champs suivis d'un * sont obligatoires ». Elle doit toujours être présente dès que la tâche dépasse 2 champs de formulaire.

    L’astérisque est placé à la fin du libellé de chacun des champs obligatoires. Il est toujours en rouge pour que l'utilisateur puisse repérer rapidement quel champ est obligatoire.

    Informations techniques

    Lorsque le formulaire contient un titre, la mention doit être à 8 px sous le titre.

    Si le formulaire ne contient pas de titre, la mention doit être placée à 40 px au-dessus du libellé du premier champ.

    L’espace entre l’astérisque et le texte est de 8 px.


    CSS de la mention
    font-family: Open Sans;
    font-weight: regular;
    font-size: 14px;

    CSS de l'astérisque
    color: #cb381f;
    font-size: 16px;
    font-weight: bold;

    Dernière mise à jour : 30 août 2023

    Évaluation de page

    L’information sur cette page vous a-t-elle été utile?
    Avis général

    Des questions ou besoin de renseignements?

    Communiquez avec Services Québec