Dernière mise à jour : 6 juin 2025
Le champ texte est un espace permettant de saisir une information précise ou personnalisée.
- Guide d'utilisation
- Design
Dans cette page
1. Utilisation
Principales règles
Le champ texte est utilisé lorsque la réponse est unique à l'utilisateur ou l'utilisatrice ou pour ne pas limiter les options.
De longueur variable, il peut comprendre des lettres, des chiffres et des caractères spéciaux.
Le libellé principal précise l'information à saisir.
Un texte d’aide peut l'accompagner pour préciser le format ou le type de réponse attendue.
Variants possibles
Interactivité
- Le champ texte et son libellé sont cliquables pour activer la saisie de données.
- La navigation à l'intérieur du champ à l'aide des flèches du clavier ou en cliquant avec la souris pour positionner le curseur permet de modifier une réponse.
2. Quand envisager autre chose
- Pour sélectionner plus d'une option parmi un choix allant jusqu'à six réponses simples et claires, on choisit la case à cocher.
- Pour présenter un ensemble de deux à six options courtes où un seul choix de réponse est possible, on opte pour le bouton radio.
- Lorsqu'une seule option doit être retenue parmi plus de six options courtes et précises, on utilise la liste déroulante.
3. Rédaction UX
Règles spécifiques au champ texte
Libellé principal
Le libellé principal est clair, concis et rédigé dans une forme positive.
Il commence par une majuscule.
Il ne finit jamais par un deux-points et n’a pas de ponctuation finale.
S’il s’agit d’une phrase complète ou interrogative, il peut exceptionnellement se terminer par un point ou un point d’interrogation.
Limite de caractères : 100, espaces incluses
Texte d'aide (optionnel)
Le texte d’aide fournit une information complémentaire pour bien comprendre le libellé principal et y répondre correctement.
Par exemple, dans le cas d’un champ texte, il peut indiquer le format à reproduire lorsqu'il s'agit d'un code postal ou d'une adresse.
Il ne comporte pas de limite de caractères, mais il doit être précis et le plus concis possible.
Il utilise un langage simple et inclusif.
Règles générales pour les formulaires
Au-delà des règles propres au composant, il importe aussi de considérer celles qui concernent l’ensemble d’un formulaire.
Éviter les termes techniques, sauf s’ils sont connus par les personnes qui utiliseront le formulaire, par exemple des gens de métier.
Déterminer si la question est obligatoire et l’indiquer en ajoutant un astérisque.
Si une information complémentaire doit être communiquée, tenir compte du contexte pour choisir ce qui convient le mieux entre le texte d’aide et l'infobulle.
1. Anatomie
2. Astérisque et infobulle
Au niveau du libellé principal, deux éléments peuvent être ajoutés, soit :
- un astérisque (*) pour indiquer une question obligatoire ;
- une infobulle pour fournir une information complémentaire, mais non essentielle pour comprendre la question et y répondre.
Ces éléments peuvent être utilisés simultanément ou séparément selon les besoins d’information à communiquer.
3. Texte d’aide
Le texte d’aide se positionne sous le champ texte afin de fournir des informations essentielles pour répondre à la question, par exemple le format du numéro de téléphone ou du code postal à saisir.
4. Message d’erreur
Les types d'erreurs possibles avec le champ texte sont multiples, allant du champ vide à une saisie non valide. Lorsqu'une correction doit être apportée, le message d'erreur vient se positionner sous le champ texte et au-dessus du texte d’aide, s'il y en a un.
5. Grille
Afin d'assurer une lisibilité optimale, il importe de respecter un certain spectre de longueur de ligne. Ces limites sont établies dans le composant selon les points de rupture de chaque taille d’écran.
Particularité du champ texte court
Pour le variant Champ texte court, la largeur est de 150 px dans tous les points de rupture.
6. États interactifs du champ de saisie
Défaut
Survol
Actif - focus
Rempli
Erreur
Désactivé
