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 de l’étiquette 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 à 8px sous le titre.
Si le formulaire ne contient pas de titre, la mention doit être placée à 40px au-dessus du libellé du premier champ.
L’espace entre l’astérisque et le texte est de 6 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 : 15 août 2022