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
Le composant 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 à tous les composants 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
Le composant est constitué 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 : 6 novembre 2023