Text field
Champ de texte
Un contrôle étiqueté sur une ligne pour saisir ou modifier une valeur textuelle.
Avec vos mots
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
Essayer
Saisir du texte
Comparer les trois comportements
Scénario comparatif partagé : Un formulaire recueille du texte, la longueur du contenu et l'intention d'envoi déterminant le contrôle de saisie approprié.
Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.
Champ de texte
Text field accepte une ligne ; Textarea accepte plusieurs lignes, tandis que Search field envoie une requête dans un contexte de recherche.
Votre mission
Saisir un nom valide, envoyer, puis dépasser la limite et corriger grâce au message relié.
Cas limite à vérifier
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.
Mission
Champ texte - Text field
Saisir un nom valide, envoyer, puis dépasser la limite et corriger grâce au message relié.
Parties du spécimen
Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.
Libellé
Le texte persistant qui nomme un contrôle ou un champ.
À 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 les concepts proches
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.
Zone de texte multiligneSearch field envoie une requête ; Text field modifie une valeur générale, tandis que Textarea accepte un contenu multiligne.
Champ de rechercheBuild pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
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.
Accessibilité
- Role
- native textbox
- Nom accessible
- Le contrôle principal ou la région nommée 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
- 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.
- Scroll
- 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
Bindings
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
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : The visible label remains separate from placeholder text, and help or error messages are programmatically associated.
Vérifier la source du binding
Sources
- WHATWG HTML: The input element
WHATWG · standard · 2026-07-16
Affirmation couverte : Text field: native input types, labeling, state, validation, and form participation.
- WHATWG HTML: Forms
WHATWG · standard · 2026-07-16
Affirmation couverte : Text field: native form controls, labels, submission, validation, and disabled-state behavior.
Vérifié le 2026-07-16 · rev. 1
- Responsable
- SkillCodex Editorial
- Statut
- review
- Relecture
- Independent editorial review pending
- Prochaine revue
- 2026-10-16
- Publication
- Non publiée
- Historique
- Brouillon initial sourcé du MVP, en attente de relecture indépendante.