Aller au contenu
SkillCodex
Menu

Text field

Champ de texte

Un contrôle étiqueté sur une ligne pour saisir ou modifier une valeur textuelle.

Essayer le composant
Repères, sources et actions
Sources et révision
Mis à jour le
Version
v1.0.26 · r2
Sources
5 sources
Statut
Publié
Consulter les sources

Tu as peut-être cherché : une boîte pour saisir mon nom affichéune ligne pour une adresse e-mailme laisser saisir une valeur courte

Toutes les formulations
Enregistrer et partager

Reconnaître

Saisir du texte

Essayer

Attend-on une valeur courte, un texte multiligne ou une requête de recherche ?

Champ de texte

Contexte commun aux essais

Un formulaire recueille du texte, la longueur du contenu et l'intention d'envoi déterminant le contrôle de saisie approprié.

Champ de texte

Mission

Champ texte - Text field

Saisir un nom valide, envoyer, puis dépasser la limite et corriger grâce au message relié.

Entre 2 et 40 caractères, sur une seule ligne.

0 sur 40 caractères

Résultat de l’essai

Le nom d'affichage n'est pas encore enregistré.

Étape 1 sur 3

Essayer

Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.

Comportement et cas limite
À observer
Le libellé visible, la valeur actuelle et l'aide restent disponibles avant toute erreur.
Cas limite
Après un envoi invalide, le texte reste, l'erreur précise est reliée et le focus suit uniquement le plan de correction du formulaire.

Ce que cet essai montre

Text field accepte une ligne ; Textarea accepte plusieurs lignes, tandis que Search field envoie une requête dans un contexte de recherche.

Lequel convient à ton besoin ?

Champ de texte

Saisir un nom, e-mail, code ou autre valeur courte

Zone de texte multiligne

Recueillir un message, une note ou une description

Quel composant utilises-tu ici ?
Différence et sources

Text field accepte une ligne ; Textarea accepte plusieurs lignes, tandis que Search field envoie une requête dans un contexte de recherche.

Consulter les sources

    Parties du spécimen

    Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.

    Libellé

    Le texte persistant qui nomme un contrôle ou un champ.

    Position dans l’atlas

    Carte relationnelle

    Repère le chapitre, les concepts proches et la prochaine décision utile.

    • Chapitre

      Saisir du texte

      Champ de texte appartient à ce groupe de concepts comparés.

    • Ne pas confondre

      Zone de texte multiligne

      Choisis Champ de texte si la valeur est un nom, un e-mail, un code ou une autre saisie courte. Choisis Zone de texte multiligne si l’utilisateur rédige un message, une note ou une description.

      Comparer cette paire
    • Ne pas confondre

      Champ de recherche

      Choisis Champ de texte si la valeur est un nom, un e-mail, un code ou une autre saisie courte conservée comme donnée. Choisis Champ de recherche si le texte saisi est une requête sur un site, un catalogue ou un ensemble de résultats.

      Comparer cette paire
    • Prochaine étape

      Compare les concepts du chapitre avant de retenir une implémentation.

      Ouvrir le chapitre

    Avec tes mots

    Comprendre

    Ce que les gens décrivent

    Alias documentés : zone de saisie, champ de saisie, saisie sur une ligne

    • une boîte pour saisir mon nom affiché
    • une ligne pour une adresse e-mail
    • me laisser saisir une valeur courte
    • un champ de formulaire étiqueté
    • modifier ce nom de compte
    • un champ avec aide et erreur dessous

    Choisir

    À utiliser quand

    • Saisir un nom, e-mail, code ou autre valeur courte
    • Modifier une propriété textuelle dans un formulaire

    À éviter quand

    • La réponse nécessite des retours à la ligne
    • L'intention principale est d'envoyer une recherche

    Comparer

    Comparer les concepts proches

    Checklist de vérification

    Essaie ces gestes dans le lab, puis vérifie les mêmes comportements dans le résultat de ton agent. Adapte les noms d’exemple à ton interface.

    1. 1. À faire

      Saisis une valeur valide, puis sélectionne, remplace et annule une partie du texte avec les raccourcis habituels.

      Résultat attendu

      La modification native du texte fonctionne, et un libellé visible continue d’identifier le champ après la disparition de l’indication interne.

    2. 2. À faire

      Valide une valeur invalide ou trop longue, puis corrige-la.

      Résultat attendu

      Ta saisie est conservée, l’erreur explique la contrainte concernée et la correction te permet de continuer.

    3. 3. À faire

      Atteins le champ avec Tab et appuie sur Entrée après avoir saisi une valeur valide.

      Résultat attendu

      Le focus est visible, et Entrée suit le comportement de validation annoncé par le formulaire sans déclencher d’action sans rapport.

    Contrat complet
    1. 1Un libellé visible reste distinct du placeholder
    2. 2La finalité et l'autocomplétion sont correctes
    3. 3L'aide et l'erreur sont reliées par programme
    4. 4Un envoi invalide conserve la valeur saisie

    Comprendre → Reconnaître → Choisir → Comparer

    Pack pour ton agent

    Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

    Implémenter correctement

    Construis Champ de texte sans casser son comportement

    # Implémenter Champ de texte dans ton agent
    
    ## Objectif
    Implémente Champ de texte pour ce comportement vérifié : Un contrôle étiqueté sur une ligne pour saisir ou modifier une valeur textuelle.
    
    ## Prérequis
    - Inspecte d’abord le dépôt, le design system et les tests existants.
    - Préserve les changements sans rapport et borne les fichiers modifiés.
    - Confirme que Champ de texte répond au besoin avant de coder.
    
    ## Comportement requis
    - La saisie modifie une valeur tout en conservant les comportements natifs de sélection, presse-papiers et annulation.
    - Un message précis dans le contexte identifie le champ invalide et explique comment le corriger.
    
    ## États à couvrir
    - Nom affiché valide
    - Nom affiché invalide
    
    ## Accessibilité
    - Rôle ARIA : input[type=text]
    - Le contrôle principal ou la région nommée pour Champ de texte possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
    - Un focus visible entoure le champ sans masquer sa valeur, son libellé ni son erreur.
    - Sans objet : la valeur reste jusqu’à sa modification, sa réinitialisation ou son envoi volontaire.
    - Le libellé, la finalité, l’obligation, la relation d’aide, l’état invalide et l’erreur précise sont exposés.
    - Tab focalise le champ
    - Les raccourcis natifs de saisie, sélection, annulation et presse-papiers restent actifs
    - Entrée suit le contrat du formulaire
    
    ## Quand ne pas utiliser
    - La réponse nécessite des retours à la ligne
    - L’intention principale est d’envoyer une recherche
    
    ## Critères d’acceptation
    - Un libellé visible reste distinct du placeholder
    - La finalité et l’autocomplétion sont correctes
    - L’aide et l’erreur sont reliées par programme
    - Un envoi invalide conserve la valeur saisie
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le besoin est relié au comportement canonique avant toute décision technique.
    • Les états, l’accessibilité et les non-objectifs empêchent une implémentation seulement visuelle.
    • Les critères d’acceptation et le format de sortie rendent la vérification observable.

    À essayer ensuite

    Vérifie Champ de texte sur un parcours réel

    # Vérifier Champ de texte après l’implémentation
    
    ## Objectif
    Audite l’implémentation de Champ de texte au regard de son comportement, de ses états et de ses exigences d’accessibilité sans la modifier automatiquement.
    
    ## Contrôles
    - Rejoue le plus petit parcours représentatif.
    - Contrôle le clavier, le focus, le nom accessible et les annonces.
    - Relie chaque écart à un critère d’acceptation précis.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:0aecf90ddddca9d29178e3acd50faeb6248a8eaf738d0073e862b81ca411247f

    Diagnostiquer un problème

    Trouve et corrige le défaut de Champ de texte

    # Déboguer Champ de texte dans ton agent
    
    ## Symptôme observé
    [DÉCRIS ICI LE SYMPTÔME]
    
    ## Contrôles observables
    - Reproduis le problème avec le plus petit parcours pertinent.
    - Compare le comportement aux états et transitions documentés de Champ de texte.
    - Vérifie le clavier, le focus, le nom accessible et les annonces.
    
    ## Causes possibles
    - La primitive employée ne correspond pas au comportement attendu.
    - Un état, une transition ou un retour de focus manque.
    - Le composant voisin capture un événement ou masque un signal accessible.
    
    ## Corrections bornées
    - Corrige la cause reproduite sans recréer les composants voisins.
    - Conserve le contrat public et ajoute un test ciblé de non-régression.
    - N’installe aucune dépendance et ne modifie aucun état distant sans autorisation.
    
    ## Vérification finale
    - Un libellé visible reste distinct du placeholder
    - La finalité et l’autocomplétion sont correctes
    - L’aide et l’erreur sont reliées par programme
    - Un envoi invalide conserve la valeur saisie
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le symptôme explicite évite de partir d’une correction supposée.
    • Les contrôles séparent comportement, accessibilité et interférences voisines.
    • La correction reste bornée et doit produire une preuve de non-régression.

    À essayer ensuite

    Verrouille la correction de Champ de texte

    # Empêcher la régression de Champ de texte
    
    ## Objectif
    Transforme la cause reproduite en test de non-régression ciblé et compare Champ de texte aux concepts voisins avant d’élargir la correction.
    
    ## Contrôles
    - Prouve que le test échoue avant la correction.
    - Prouve qu’il passe après la correction bornée.
    - Vérifie qu’aucun composant voisin n’a changé de comportement.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:10867d3b597d4717d3929664d85ae19773bb160aec7a58055210756e614fdecd

    Fiche complète, enregistrement et provenance

    Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.

    Digest du Pack: sha256:35544169c6906ba4a2a6b211ca7d03980125dc2d864f29643f6165c851767e40

    Dans le code

    TechnologiePrimitiveVersionLimite
    Web platform

    label with input

    NatifLe libellé visible reste distinct du placeholder, et les messages d’aide ou d’erreur sont associés par programmation.

    Détails techniques

    Comportements

    • Saisir du texte

      La saisie modifie une valeur tout en conservant les comportements natifs de sélection, presse-papiers et annulation.

    • Expliquer la validation

      Un message précis dans le contexte identifie le champ invalide et explique comment le corriger.

    États

    • Nom affiché valide

      Nom affiché valide

    • Nom affiché invalide

      Nom affiché invalide

    Transitions d’état

    • Nom affiché valide → Nom affiché invalide

      L’envoi d’une valeur dépassant la limite conserve le texte et relie l’erreur précise.

    • Nom affiché invalide → Nom affiché valide

      La modification de la valeur dans la limite résout l’erreur de validation reliée.

    Scénarios de test

    Contexte
    Un formulaire de profil modifie un nom affiché public avec une indication de longueur.
    Mission
    Saisir un nom valide, envoyer, puis dépasser la limite et corriger grâce au message relié.
    État principal
    Le libellé visible, la valeur actuelle et l'aide restent disponibles avant toute erreur.
    Cas limite
    Après un envoi invalide, le texte reste, l'erreur précise est reliée et le focus suit uniquement le plan de correction du formulaire.

    Signaux visuels

    • Libellé persistant au-dessus ou à côté
    • Valeur modifiable sur une ligne
    • Aide ou erreur reliée dessous

    Signaux comportementaux

    • Entrée n'insère pas de nouvelle ligne
    • Sélection, presse-papiers et annulation natifs fonctionnent
    • La validation conserve la valeur saisie

    Accessibilité

    Rôle
    input[type=text]
    Nom accessible
    Le contrôle principal ou la région nommée pour Champ de texte possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
    Focus clavier
    Un focus visible entoure le champ sans masquer sa valeur, son libellé ni son erreur.
    Fermeture
    Sans objet : la valeur reste jusqu'à sa modification, sa réinitialisation ou son envoi volontaire.
    Défilement
    Le champ actif, le texte d'aide et le message de validation restent visibles lorsque la page ou un clavier virtuel modifie la zone d'affichage.
    Annonce
    Le libellé, la finalité, l'obligation, la relation d'aide, l'état invalide et l'erreur précise sont exposés.
    Clavier
    • Tab focalise le champ
    • Les raccourcis natifs de saisie, sélection, annulation et presse-papiers restent actifs
    • Entrée suit le contrat du formulaire

    Implémentations

    Ouvrir la matrice HTML, ARIA, Radix et shadcn
    • label with input

      implementationKind
      native
      nativeElement
      label with input
      ariaPattern
      textbox
      radixPrimitive
      Non applicable
      shadcnRecipe
      Non applicable
      runtimeDependency
      Non applicable
      packageName
      Non applicable
      exportName
      Non applicable
      exactVersion
      Non applicable
      status
      verified
      sourceId
      source-ui-html-input
      deprecationStatus
      active
      replacement
      Non applicable
      validFrom
      Non applicable
      validUntil
      Non applicable

      Limite d’équivalence : Le libellé visible reste distinct du placeholder, et les messages d’aide ou d’erreur sont associés par programmation.

      Vérifier la source du binding

    Sources

    • WHATWG HTML: The input element
      sourceId
      source-ui-html-input
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/input.html#the-input-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:4699d26dbf428296b4b352b480b75c846a9a6b23cf3f124d6d6fe6b5e19d4eba
      status
      verified

      Affirmation couverte : Champ de texte : sémantique native normative, états, attributs et comportement du navigateur pour input.

    • WHATWG HTML: Forms
      sourceId
      source-ui-html-forms
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/forms.html
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:730c20c8a823ab6b9a40c77d4731d6aab46895cd98c388fe12c966096d5bdd18
      status
      verified

      Affirmation couverte : Champ de texte : sémantique native normative, états, attributs et comportement du navigateur pour HTML form controls.

    • WCAG 2.2: Focus Appearance
      sourceId
      source-ui-wcag-understanding-focus-appearance
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
      status
      verified

      Affirmation couverte : Champ de texte : guide WCAG informatif pour évaluer l'apparence visible du focus clavier.

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Champ de texte : définitions normatives des rôles ARIA et contraintes du rôle accessible indiqué.

    • WHATWG HTML: The textarea element
      sourceId
      source-ui-html-textarea
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:418a8f9ce1e8690c6d458121120b0b3b7cd907aa92b2101b85f82f7e02d5ac2f
      status
      verified

      Affirmation couverte : Champ de texte : sémantique native normative, états, attributs et comportement du navigateur pour textarea.