Textarea Zone de Texte
Introduction
Un contrôle de saisie de texte libre multiligne pour capturer des entrées utilisateur plus longues, comme commentaires, descriptions, retours ou soumissions de formulaires longs. Il fonctionne comme une mise en page totalement accessible dans l'architecture client sans JS.
Le composant Textarea est totalement intégré en tant que bloc textarea dans le Page Builder, permettant aux auteurs de configurer facilement espaces réservés, indices d'aide, règles de validation, échelle de taille et comportement d'auto-redimensionnement.
Usage
Ces exemples illustrent comment les éditeurs de contenu lient et structurent des zones de texte.
1. Zone de texte standard avec texte d'aide
Une entrée multiligne par défaut avec libellé et texte d'aide explicatif. Idéal pour les champs de retour simples.
{
"type": "textarea",
"label": "Public Comment",
"placeholder": "Share your thoughts...",
"helperText": "Comments are visible to all workspace members.",
"interactive": true
}
2. Zone compacte avec compteur de caractères et longueur max
Une zone de taille moyenne avec limite de caractères et auto-redimensionnement activé, affichant le compteur en direct.
{
"type": "textarea",
"label": "Status Update",
"placeholder": "What's happening?",
"maxLength": 200,
"showCount": true,
"autoresize": true,
"size": "sm",
"interactive": true
}
3. Zone de texte avec état d'erreur invalide
Démontre l'état visuel d'erreur, active les bordures d'invalidation et pré-remplit un message d'erreur pour affichage client.
{
"type": "textarea",
"label": "Account Bio",
"placeholder": "Tell us about yourself",
"invalid": true,
"errorText": "Bio cannot contain profanity.",
"interactive": true
}
Props
| Propriété | Type de champ CMS | Défaut | Description / options prises en charge |
|---|---|---|---|
Texte du libellé (label) | string | - | Titre descriptif au-dessus de la zone. |
Texte d'espace réservé (placeholder) | string | - | Texte fantôme dans le champ vide. |
Indice d'aide (helperText) | string | - | Note contextuelle légère sous le champ. |
Auto-redimensionnement (autoresize) | boolean | false | S'adapte à la hauteur du contenu, supprime les barres de défilement statiques. |
Longueur max (maxLength) | number | - | Limite supérieure de caractères saisissables. |
Afficher le compteur (showCount) | boolean | false | Rend un compteur en direct (ex. 12/200). |
Variante visuelle (variant) | select | "outline" | Thème de bordure et de remplissage. • Options : "outline", "surface", "subtle", "flushed". |
Échelle de taille (size) | select | "md" | Contrôle padding et taille de police. • Options : "xs", "sm", "md", "lg", "xl". |
Largeur (width) | select | "full" | Comportement de largeur de bloc. • Options : "full", "fit". |
État invalide (invalid) | boolean | false | Active les bordures d'erreur et l'état invalide. |
Désactivé (disabled) | boolean | false | Désactive l'interaction et atténue le champ. |
Forcer interactif (interactive) | boolean | true | Hydrate la zone pour lier les événements client. |
Developer Notes & Accessibility
- Intégration de formulaire native : Compile en
<textarea>natif avecnameetform, garantissant l'usabilité native sans JS. - Conformité WAI-ARIA : Les relations libellé/erreur sont liées via
label,aria-invalidetaria-describedby, assurant l'annonce des erreurs de validation par les lecteurs d'écran. - Auto-redimensionnement intelligent :
autoresizeajuste dynamiquement la hauteur de défilement à la frappe, sans reflows coûteux.