1. Accueil  
  2. Design  
  3. Composants  
  4. Formulaire  
  5. Indicateur de champ obligatoire

Indicateur de champ obligatoire

L'indicateur de champ obligatoire 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 : 5 juin 2024

É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