Système de design GCComposants
Système de design GC Démarrer Aperçu des modèles de pagePage de base Aperçu des composantsAlerteAvisBarre de navigation latéraleBarre de navigation supérieureBascule de langueBoutonBoutons radioCarteCases à cocherChamp de dateChamp de saisieChemin de navigationConteneurDate de modificationDétailsEn-têteGrilleIcôneIndicateur d'étapeJeu de champsLienMasquage accessibleMenu thématiqueMessage d'erreurPaginationPied de pageRechercheRésumé des erreursSélectionSignatureTableauTéléverseur de fichiersTexteTitreZone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactiveÉtat Dimensionnement de la boîteDimensionnement du conteneurAffichageDébordementPositionVisibilité PoliceFamille de policeTaille de policeStyle de policeÉpaisseur de policeHauteur de ligneCouleur de lienTaille de lienDécoration de texte de lienStyle de listeAlignement de texteCouleur de texteDébordement de texteTransformation de texteSaut de mot MargeMarge intérieure Alignement de contenuAlignement des élémentsAlignement individuelÉlément flexibleDirection de l’élément flexibleÉlargissement de l’élément flexibleRétrécissement de l’élément flexibleHabillage de l’élément flexibleDégagementColonnes de grilleLignes de grilleJustification de contenuJustification des élémentsJustification individuelleOrdreAgencement de contenuAgencement des élémentsAgencement individuel Couleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordure Noms des icônesTaille de l'icôneImage CurseurÉvénements de pointeurTransition Aperçu des stylesUnités de styleCouleurEspacementTypographie Nous contacterS'impliquerTrouvez une démo

Champ de saisie
<gcds-input>

Autres noms : saisie de texte, zone d'entrée. Un champ de saisie est un espace permettant de saisir une courte réponse à une question ou à une directive.
  • GitHub
  • Figma

Aperçu du composant de champ de saisie

Examinez ce que font les champs de saisie pour déterminer s’ils répondent à vos besoins. Sélectionnez ensuite le meilleur type de champ de saisie qui répond à votre cas d’utilisation.

Problèmes résolus par les champs de saisie

Utilisez un champ de saisie lorsque vous attendez de l’utilisateur·rice une réponse d’une seule ligne, par exemple :
  • une réponse individuelle ou unique.
  • une courte réponse libre.
  • une réponse avec des contraintes quant à la longueur du texte ou à son format.
  • des renseignements essentiels d’identification ou des coordonnées.
  • une date qu’elle connaît déjà, comme une date de naissance (pour la sélection d’une date inconnue, utilisez le sélecteur de dates).
Remarque : Ne recueillez que les renseignements que vous êtes autorisé·e à traiter et veillez à les protéger conformément aux normes du gouvernement du Canada.

Composants connexes

Zone de texte : lorsque vous cherchez à obtenir une réponse libre de plusieurs lignes. Sélecteur de date : lorsque vous souhaitez que l’utilisateur·rice choisisse une date, comme pour la prise de rendez-vous.

Choisissez un type de champ de saisie

Définissez le type de champ de saisie en fonction de la méthode de validation des valeurs saisies par une personne. L’attribut input-type (type de champ de saisie) accepte les options suivantes :

Saisie textuelle

À utiliser lorsqu’aucun autre type de champ de saisie n’est approprié pour une saisie sur une seule ligne.
  • Pour recueillir le nom d’une personne, le plus souvent son nom complet.
  • En remplacement de la saisie numérique pour des choses comme :
    • des approximations pouvant inclure des valeurs non numériques;
    • des valeurs qui ne sont pas de véritables nombres, comme des numéros de compte, des numéros de carte de crédit ou des codes d’authentification;
    • des nombres avec décimales.

Saisie d’une adresse courriel

  • Pour recueillir des adresses courriel.
  • Pour exiger un format d’adresse courriel.

Saisie téléphone

  • Pour recueillir des numéros de téléphone.
  • Pour activer le clavier téléphonique sur les appareils mobiles.

Saisie de mot de passe

  • Pour la collecte et la validation de mots de passe.
  • Pour définir des contraintes spécifiques aux mots de passe.
Conseil : Indiquez toute contrainte liée au mot de passe dans le texte explicatif du champ de saisie afin que les personnes sachent exactement quelles sont les règles.

Saisie numérique

  • Pour recueillir les nombres entiers qui peuvent augmenter ou diminuer, comme les quantités.
  • Pour rejeter les valeurs qui ne sont pas numériques.
Conseil : Lorsque vous définissez une contrainte, comme une fourchette numérique, utilisez le texte explicatif pour transmettre une directive précise.

Saisie d’une clé de recherche

  • Pour collecter une valeur à rechercher.

Saisie d’une URL

  • Pour collecter une URL, comme une adresse Web ou un nom de domaine.
Aidez-nous à nous améliorer Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact. Quelque chose ne va pas? Signalez-le sur GitHub en créant un compte. Vous pourrez accéder aux réponses de l'équipe, suivre les progrès réalisés concernant votre problèmes et voir les problèmes signalés par d'autres personnes. Fournir des commentaires Signaler un problème sur GitHub
2026-02-12