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
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
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.
Quand ne pas l’utiliser
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.
Anatomie
- Mention
- Astérisque
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Mention
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 deux champs de formulaire.
Astérisque
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.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Mention
Positionnement et alignement : Sous le titre et/ou au-dessus du libellé du premier champ.
Espacements : 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.
Astérisque
Positionnement et alignement : Placé à la fin du libellé du champ obligatoire, en ligne avec le texte.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Le composant n’est pas interactif.
Interaction
Aucune interaction par la souris ou le clavier n’est requise.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 15 janvier 2026