Aller au contenu
SkillCodex
Menu

Textarea

Zone de texte multiligne

Un contrôle étiqueté pour saisir ou modifier un texte libre sur plusieurs lignes.

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 grande zone pour écrire un messagesaisir plusieurs lignes de retourun champ de commentaire qui peut grandir

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 ?

Zone de texte multiligne

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é.

Zone de texte multiligne

Mission

Zone de texte - Textarea

Écrire deux paragraphes, redimensionner le champ, dépasser la limite et corriger sans perdre le brouillon.

Rédige un ou plusieurs paragraphes. Les retours à la ligne sont conservés.

0 sur 500 caractères

Résultat de l’essai

La note multiligne n'est pas encore enregistrée.

É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
La Note de passation, l’aide et le compteur restent lisibles quand la zone multiligne grandit ou défile.
Cas limite
À la limite, la saisie et le collage sont traités de façon cohérente et une erreur précise reliée conserve tout le brouillon.

Ce que cet essai montre

Textarea accepte les retours à la ligne et un contenu libre long ; Text field tient sur une ligne, tandis que Search field envoie une requête.

Lequel convient à ton besoin ?

Zone de texte multiligne

Recueillir un message, une note ou une description

Champ de texte

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

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

Textarea accepte les retours à la ligne et un contenu libre long ; Text field tient sur une ligne, tandis que Search field envoie une requête.

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

      Zone de texte multiligne appartient à ce groupe de concepts comparés.

    • Ne pas confondre

      Champ de texte

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

      Comparer cette paire
    • Ne pas confondre

      Champ de recherche

      Choisis Zone de texte multiligne si l’utilisateur rédige un message, une note ou une description sur plusieurs lignes. Choisis Champ de recherche si l’utilisateur cherche quelque chose et attend des résultats, pas un enregistrement.

      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 : champ multiligne, zone de commentaire, saisie de texte long

    • une grande zone pour écrire un message
    • saisir plusieurs lignes de retour
    • un champ de commentaire qui peut grandir
    • écrire une description avec des retours à la ligne
    • une zone redimensionnable pour des notes
    • afficher un compteur sous une longue réponse

    Choisir

    À utiliser quand

    • Recueillir un message, une note ou une description
    • Permettre des paragraphes pertinents

    À éviter quand

    • La valeur doit rester sur une courte ligne
    • L'utilisateur a besoin de mise en forme riche

    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

      Écris deux paragraphes avec Entrée entre les deux.

      Résultat attendu

      Entrée insère un saut de ligne au lieu d’envoyer le formulaire par surprise, et le libellé visible reste disponible.

    2. 2. À faire

      Colle un long brouillon, puis redimensionne le champ ou laisse-le grandir dans une fenêtre étroite.

      Résultat attendu

      Tu peux lire et modifier tout le brouillon, et le champ ne masque pas les actions du formulaire.

    3. 3. À faire

      Si une limite de longueur existe, dépasse-la en tapant puis en collant du texte, avant de raccourcir le brouillon.

      Résultat attendu

      Les deux méthodes suivent la règle annoncée, tout problème est expliqué et tu peux corriger sans perdre tout le brouillon.

    Contrat complet
    1. 1Entrée crée une nouvelle ligne
    2. 2Le libellé et l'aide visibles restent associés
    3. 3Le redimensionnement ne masque jamais contenu ou actions
    4. 4Les erreurs de longueur conservent le brouillon et expliquent la correction

    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 Zone de texte multiligne sans casser son comportement

    # Implémenter Zone de texte multiligne dans ton agent
    
    ## Objectif
    Implémente Zone de texte multiligne pour ce comportement vérifié : Un contrôle étiqueté pour saisir ou modifier un texte libre sur plusieurs lignes.
    
    ## 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 Zone de texte multiligne répond au besoin avant de coder.
    
    ## Comportement requis
    - Entrée insère une nouvelle ligne, et le contrôle peut grandir ou défiler sans masquer son libellé.
    - Un message précis dans le contexte identifie le champ invalide et explique comment le corriger.
    
    ## États à couvrir
    - Brouillon dans la limite
    - Brouillon au-delà de la limite
    
    ## Accessibilité
    - Rôle ARIA : textarea
    - Le contrôle principal ou la région nommée pour Zone de texte multiligne 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.
    - Le focus visible entoure le contrôle et reste perceptible pendant le défilement du texte.
    - Sans objet : le brouillon reste jusqu’à sa réinitialisation, son envoi ou son effacement volontaire.
    - Le libellé, le rôle multiligne, l’aide, la limite, l’état invalide et l’erreur sont exposés sans annoncer chaque caractère.
    - Tab focalise la zone
    - Entrée insère une nouvelle ligne
    - Les raccourcis natifs de saisie et défilement restent disponibles
    
    ## Quand ne pas utiliser
    - La valeur doit rester sur une courte ligne
    - L’utilisateur a besoin de mise en forme riche
    
    ## Critères d’acceptation
    - Entrée crée une nouvelle ligne
    - Le libellé et l’aide visibles restent associés
    - Le redimensionnement ne masque jamais contenu ou actions
    - Les erreurs de longueur conservent le brouillon et expliquent la correction
    
    ## 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 Zone de texte multiligne sur un parcours réel

    # Vérifier Zone de texte multiligne après l’implémentation
    
    ## Objectif
    Audite l’implémentation de Zone de texte multiligne 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:ac5f8d2c0cb639f9512edcb3dcdc8d8350ffb5c7e39e806492f840c942080af4

    Diagnostiquer un problème

    Trouve et corrige le défaut de Zone de texte multiligne

    # Déboguer Zone de texte multiligne 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 Zone de texte multiligne.
    - 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
    - Entrée crée une nouvelle ligne
    - Le libellé et l’aide visibles restent associés
    - Le redimensionnement ne masque jamais contenu ou actions
    - Les erreurs de longueur conservent le brouillon et expliquent la correction
    
    ## 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 Zone de texte multiligne

    # Empêcher la régression de Zone de texte multiligne
    
    ## Objectif
    Transforme la cause reproduite en test de non-régression ciblé et compare Zone de texte multiligne 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:0a1e1859fc36e88b24802ae2166206c5dca2973c60a4846d159977ee2cc257e8

    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:ec33d889eb2f5c8461b67f3a61ed9ca3a02603eeb87d3f9cb6a89878a42b479e

    Dans le code

    TechnologiePrimitiveVersionLimite
    Web platform

    label with textarea

    NatifLe contrôle multiligne natif préserve les sauts de ligne, le redimensionnement et le formulaire, avec libellés et erreurs associés.

    Détails techniques

    Comportements

    • Saisir plusieurs lignes

      Entrée insère une nouvelle ligne, et le contrôle peut grandir ou défiler sans masquer son libellé.

    • Expliquer la validation

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

    États

    • Brouillon dans la limite

      Brouillon dans la limite

    • Brouillon au-delà de la limite

      Brouillon au-delà de la limite

    Transitions d’état

    • Brouillon dans la limite → Brouillon au-delà de la limite

      La saisie ou le collage porte le brouillon multiligne conservé au-delà de 500 caractères.

    • Brouillon au-delà de la limite → Brouillon dans la limite

      La modification du brouillon conservé à 500 caractères ou moins résout l’erreur reliée.

    Scénarios de test

    Contexte
    Un formulaire de passation recueille une Note de passation multiligne limitée à 500 caractères.
    Mission
    Écrire deux paragraphes, redimensionner le champ, dépasser la limite et corriger sans perdre le brouillon.
    État principal
    La Note de passation, l’aide et le compteur restent lisibles quand la zone multiligne grandit ou défile.
    Cas limite
    À la limite, la saisie et le collage sont traités de façon cohérente et une erreur précise reliée conserve tout le brouillon.

    Signaux visuels

    • Région modifiable plus haute
    • Libellé persistant
    • Poignée, aide ou compteur lorsque utile

    Signaux comportementaux

    • Entrée insère des retours à la ligne
    • Le contenu défile ou le contrôle grandit de façon prévisible
    • La validation gère la longueur sans effacer

    Accessibilité

    Rôle
    textarea
    Nom accessible
    Le contrôle principal ou la région nommée pour Zone de texte multiligne 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
    Le focus visible entoure le contrôle et reste perceptible pendant le défilement du texte.
    Fermeture
    Sans objet : le brouillon reste jusqu'à sa réinitialisation, son envoi ou son effacement 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é, le rôle multiligne, l'aide, la limite, l'état invalide et l'erreur sont exposés sans annoncer chaque caractère.
    Clavier
    • Tab focalise la zone
    • Entrée insère une nouvelle ligne
    • Les raccourcis natifs de saisie et défilement restent disponibles

    Implémentations

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

      implementationKind
      native
      nativeElement
      label with textarea
      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-textarea
      deprecationStatus
      active
      replacement
      Non applicable
      validFrom
      Non applicable
      validUntil
      Non applicable

      Limite d’équivalence : Le contrôle multiligne natif préserve les sauts de ligne, le redimensionnement et le formulaire, avec libellés et erreurs associés.

      Vérifier la source du binding

    Sources

    • 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 : Zone de texte multiligne : sémantique native normative, états, attributs et comportement du navigateur pour textarea.

    • 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 : Zone de texte multiligne : 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 : Zone de texte multiligne : 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 : Zone de texte multiligne : définitions normatives des rôles ARIA et contraintes du rôle accessible indiqué.

    • 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 : Zone de texte multiligne : sémantique native normative, états, attributs et comportement du navigateur pour input.