Champ texte
Le champ texte est un espace dans lequel est saisie une information qui tient sur une ou plusieurs lignes de texte. Il peut s’agir d’une combinaison de lettres, de chiffres et de symboles.
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 ».
Variantes disponibles
Le champ texte est offert en plusieurs formats afin de s’adapter au type de données attendu :
- Champ texte d’une seule ligne
- Champ texte multiligne
Quand l’utiliser
Le champ texte est utilisé dans un formulaire.
La longueur du champ doit être adaptée à la réponse requise, selon les formats disponibles. Les indications pour choisir le format approprié selon l’information à recueillir se trouvent dans la section « Formats et contenus attendus » sous « Contenus ».
Quand ne pas l’utiliser
À ne pas utiliser lorsqu’une sélection de valeurs préétablies est préférable (par exemple une liste déroulante ou des cases à cocher).
Anatomie
- Libellé (avec ou sans indicateur de champ obligatoire)
- Précision
Facultatif - Zone de saisie de texte
- Espace réservé (placeholder)
- Indicateur du nombre de caractères maximum
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.
Bonnes pratiques
On évite d’ajouter des compléments d’information entre les champs d’un formulaire.
Les signes de ponctuation sont à éviter.
Formats et contenus attendus
Champ extra-large : Peut contenir jusqu’à 96 caractères. Utilisé pour tout contenu textuel long.
Champ large : Peut contenir jusqu’à 63 caractères. Utilisé pour saisir des adresses ou des noms de villes.
Champ moyen : Peut contenir jusqu’à 26 caractères. Utilisé pour saisir un nom ou prénom complet, un numéro de téléphone ou une adresse courriel.
Champ petit : Peut contenir jusqu’à 16 caractères. Utilisé pour saisir un code postal, une date (ex. : AAAA-MM-JJ) ou une heure (ex. : HH:MM).
Champ extra-petit : Peut contenir jusqu’à 5 caractères. Utilisé pour saisir des données courtes comme l’âge, un numéro de poste ou de bureau/appartement.
Champ multiligne : Peut contenir un grand nombre de caractères. Utilisé pour des descriptions, des commentaires ou tout contenu textuel long, pouvant s’étendre sur plusieurs phrases ou paragraphes.
Libellé
Le champ texte est accompagné d’un libellé clair et succinct. Il permet d’identifier au premier coup d’œil l’information requise dans le champ.
Espace réservé
Un espace réservé (placeholder) permet de préciser comment saisir les informations. Il est utilisé dans les champs dont le format est particulier, comme le code postal, le numéro de téléphone ou la date.
L’espace réservé est généralement précédé de « ex. : ».
Précision
Si certaines informations permettent de mieux comprendre ce qui doit être inscrit dans un champ, elles peuvent s’ajouter à la suite du libellé, avant le champ texte.
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.
Champ texte (complet)
Positionnement et alignement : Les champs texte sont placés les uns au-dessus des autres par défaut. Dans le format bureau, deux champs peuvent être placés côte à côte seulement s’ils sont complémentaires.
Dimensions : Varient selon le format choisi :
- Champ extra-large : largeur s’étendant jusqu’à un maximum de 825 px.
- Champ large : largeur 528 px.
- Champ moyen : largeur 249 px.
- Champ petit : largeur 156 px.
- Champ extra-petit : largeur 63 px.
- Champ multiligne : largeur 528 px, hauteur variable.
Espacements : L’espacement entre un champ et le libellé du champ qui le suit est de 32 px. Une gouttière de 32 px doit se trouver entre les champs placés sur une même ligne.
Message d’erreur
Positionnement et alignement : Sous le champ texte. Voir la page « Message d’erreur » pour plus de détails.
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
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Champ texte multiligne
La hauteur du champ multiligne est ajustable par l’utilisateur. Lorsque le texte saisi est plus long que le champ, une barre de défilement verticale est affichée. Le nombre de caractères maximum peut être indiqué sous le champ texte multiligne, aligné avec l’extrémité droite.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer dans le champ pour saisir du texte.
- Redimensionner la hauteur du champ multiligne à l’aide de la poignée prévue par le navigateur.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Utiliser la touche Tab pour passer d’un champ à l’autre.
- Saisir du texte directement dans le champ sélectionné.
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