1. Accueil  
  2. Composantes  
  3. Formulaire  
  4. Champ obligatoire

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 radios, 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