Textarea
Entrée de texte multiligne pour les formulaires de produit, les commentaires, les notes et le contenu généré par l'utilisateur plus long dans l'interface utilisateur PyColors.
Entrée multi-lignes pour une intention utilisateur plus longueLien vers la section
Les Textarea Le composant capture un texte plus long qu'une entrée standard.
Utilisez-le pour:
- messages de rétroaction
- Demandes d'assistance
- descriptions de produits
- notes
- invites
- commentaires
- Champs de formulaire plus longs
Textarea suit le même modèle de champ Input: étiquette, texte d'aide, état de l'erreur, identifiant généré et descriptions accessibles.
Idée de base
Utilisez Textarea lorsque l'utilisateur a besoin d'espace pour exprimer une intention, un contexte ou une explication.
ImportationLien vers la section
import { Textarea } from "@pycolors/ui";Utilisation de baseLien vers la section
Utilisez une étiquette pour rendre le champ clair et accessible.
Règle des étiquettes
Préférez une étiquette visible. Utilisez le texte d'espace réservé pour les exemples, pas comme la seule description de champ.
Quand utiliser TextareaLien vers la section
Utilisez Textarea lorsqu'une ligne ne suffit pas pour la tâche.
Feedback
Descriptions
Notes
Texte de l'aideLien vers la section
Utilisez le texte d'aide pour expliquer quel type de réponse est attendue.
Describe the product, target users, and current constraints.
Règle de texte d'aide
Le texte d'aide devrait réduire l'incertitude. Restez bref, concret et connecté à la tâche.
État de l'erreurLien vers la section
Utilisez le error prop pour les erreurs de validation. Il définit automatiquement aria-invalid, aria-errormessage, et le style d'erreur. Le texte de l'erreur role="alert", il est donc annoncé immédiatement lorsqu'il apparaît - y compris lorsque le champ est déjà ciblé. Un produit fourni par le consommateur aria-describedby est composé avec les ids helper/error du champ plutôt que remplacé.
Launch notes must contain at least 20 characters.
Règle de validation
Le texte d'erreur doit expliquer ce qui a échoué et comment le corriger. Évitez les messages vagues comme « Valeur invalide ».
Champs obligatoiresLien vers la section
Utilisation required pour les champs obligatoires. L'étiquette affiche un astérisque destructeur et la zone de texte reçoit aria-required.
Include the page, expected behavior, and what happened.
TaillesLien vers la section
Textarea prend en charge trois tailles de système de conception : sm, mdet lg.
Guide des taillesLien vers la section
| Taille | Idéal pour |
|---|---|
sm | Notes compactes, tables d'administration, formes denses |
md | Formulaires et pages de paramètres par défaut |
lg | Longues descriptions, invites, messages de soutien |
Redimensionner le comportementLien vers la section
Les resize prop contrôle comment les utilisateurs peuvent redimensionner le champ.
Options de redimensionnement disponiblesLien vers la section
| Redimensionner | Comportement |
|---|---|
vertical | L'utilisateur peut redimensionner la hauteur |
none | Taille fixe |
horizontal | L'utilisateur peut redimensionner la largeur |
both | L'utilisateur peut redimensionner la largeur et la hauteur |
Règle de redimensionnement
Préférez vertical pour la plupart des formes de produits. Évitez le
redimensionnement horizontal dans les mises en page contraintes.
Formulaire de commentairesLien vers la section
Envoyer des commentaires
Dites-nous ce qui rendrait PyColors plus utile.
Share the problem, context, and expected improvement.
Champ d'inviteLien vers la section
Be specific about the audience, output format, and constraints.
UtilisationsLien vers la section
Utiliser Textarea pour des réponses plus longues
Utilisez Input pour les valeurs courtes. Utilisez Textarea lorsque l'utilisateur doit fournir du contexte, des explications ou du contenu multiligne.
Gardez les étiquettes explicites
L'étiquette doit décrire le contenu attendu de l'utilisateur, pas l'élément d'interface utilisateur lui-même.
Ajouter du texte d'aide pour les champs complexes
Utilisez le texte d'aide lorsque le champ a besoin d'exemples, de contraintes ou de conseils de mise en forme.
Valider avec des erreurs actionnables
Les messages d'erreur doivent expliquer ce qu'il faut changer, pas seulement que la valeur est invalide.
Choisissez redimensionner intentionnellement
Utilisez le redimensionnement vertical pour un contenu flexible. N'utilisez pas de redimensionnement pour les surfaces contrôlées comme les feuilles et les cartes compactes.
Textarea vs InputLien vers la section
| Situation | Utilisation |
|---|---|
| Nom, email, URL, slug | Entrées |
| Recherche de requête | Entrées |
| Titre abrégé | Entrées |
| Message de rétroaction | Textarea |
| Description du produit | Textarea |
| Notes ou commentaires | Textarea |
| AI prompt | Textarea |
Règle de décision
Si la réponse attendue peut tenir naturellement sur une ligne, utilisez Entrée. Si l'utilisateur a besoin d'expliquer quelque chose, utilisez Textarea.
APILien vers la section
| Prop | Type | Par défaut | Désignation |
|---|---|---|---|
label | string | — | Étiquette accessible affichée au-dessus du texte |
helperText | string | — | Texte de soutien affiché lorsqu'il n'y a pas d'erreur |
error | string | — | Texte d'erreur et style de validation |
size | "sm" | "md" | "lg" | "md" | Dimensions du système de conception |
resize | "none" | "vertical" | horizontal" | "both" | "vertical" | Comportement de redimensionnement natif |
className | string | — | Autres classes Tailwind |
...props | React.TextareaHTMLAttributes<HTMLTextAreaElement> | — | Attributs natifs de textarea |
TypeScript typesLien vers la section
export type TextareaSize = "sm" | "md" | "lg";
export type TextareaResize = "none" | "vertical" | "horizontal" | "both";
export interface TextareaProps
extends
Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">,
VariantProps<typeof textareaVariants> {
label?: string;
helperText?: string;
error?: string;
size?: TextareaSize;
resize?: TextareaResize;
}AccessibilitéLien vers la section
labelest connecté à la zone de texte avechtmlFor.- Un id stable est généré avec
React.useIdlorsqu'aucun identifiant n'est fourni. helperTextest connecté avecaria-describedby.errorest connecté avecaria-errormessage.errorsetsaria-invalid.errorLe texte arole="alert"et est annoncé en direct, même si le domaine est déjà ciblé.requiredsetsaria-required.- Ne comptez pas sur le texte de l'espace réservé comme seule description accessible.
Règle d'accessibilité
Chaque zone de texte doit avoir une étiquette claire. Le texte d'aide et le texte d'erreur devraient clarifier la tâche, pas remplacer l'étiquette.
Préférez/évitezLien vers la section
Préférez
- Étiquettes visibles
- texte d'aide clair pour les entrées complexes
- Erreurs spécifiques et exploitables
- redimensionnement vertical pour un contenu plus long
- textarea pour les champs explicitation-heavy
Éviter
- Étiquettes réservées aux espaces réservés
- des erreurs vagues comme “Valeur invalide”
- redimensionnement horizontal dans les mises en page réactives
- utiliser textarea pour de courtes valeurs d'une ligne
- Demander trop de texte sans guide