Textarea
À quoi il sert
Textarea rend une zone de saisie multiligne native, avec états d’erreur et de désactivation.
Quand l’utiliser
- Saisir un texte libre de plusieurs lignes, comme un message ou une description.
- Relier un message d’erreur au champ par describedBy quand la saisie est refusée.
Quand ne pas l’utiliser
- Pour une saisie sur une seule ligne, comme un nom : utiliser Input.
- Pour choisir une valeur dans une liste fermée : utiliser Select.
Exemples
Par défaut
Erreur
Le message est obligatoire.
Désactivé
<label for="message">Message</label>
<Textarea id="message" name="message" rows={6} />Accessibilité
Clavier
- Tab place le focus dans la zone, dans l’ordre du document.
- Entrée insère un saut de ligne : le comportement reste celui du navigateur.
Lecteur d’écran
- Le nom du champ vient du label relié par for et id.
- Avec invalid, le champ est annoncé invalide et le message de describedBy est lu.
Garanti par le composant
- Élément textarea natif, sans JavaScript et sans texte en dur.
- L’erreur passe aussi par une bordure plus épaisse, en plus de la couleur.
- Hauteur minimale fixée par les jetons --pp-size-target-min ou --pp-size-control-height.
À la charge de l’intégrateur
- Fournir un label dont for est égal à id : le composant n’écrit aucun libellé.
- Écrire le message d’erreur et le référencer par describedBy quand invalid est posé.
- Renseigner enterkeyhint si le clavier virtuel doit proposer une action précise.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| id (obligatoire) | string | — | Identifiant, visé par `<label for>`. |
| name (obligatoire) | string | — | Nom envoyé avec le formulaire. |
| value | string | '' | Texte initial. |
| required | boolean | false | Saisie obligatoire (`required`). |
| disabled | boolean | false | Désactive le champ. |
| describedBy | string | — | Identifiants (séparés par des espaces) de l'aide ou du message d'erreur. |
| invalid | boolean | false | Pose `aria-invalid="true"` ; à relier au message d'erreur par `describedBy`. |
| rows | number | DEFAULT_ROWS | Hauteur initiale en lignes. |
| enterkeyhint | "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | — | Libellé de la touche Entrée du clavier virtuel (`enterkeyhint`), par exemple `next`. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-bg--pp-color-control--pp-color-fg--pp-color-muted--pp-color-status-failed--pp-color-surface--pp-font-line-height-body--pp-radius-control--pp-size-control-height--pp-size-rule--pp-size-target-min--pp-space-2xs--pp-space-3xs--pp-space-xs
Preuves et décisions
- WCAG 1.3.1 Information et relations, niveau A
- WCAG 1.4.1 Utilisation de la couleur, niveau A
- WCAG 2.4.7 Focus visible, niveau AA : apps/docs/e2e/forms.spec.ts
- WCAG 2.5.8 Taille de la cible (minimum), niveau AA : apps/docs/e2e/forms.spec.ts
- WCAG 3.3.1 Identification des erreurs, niveau A : apps/docs/e2e/forms.spec.ts
- Code source : packages/astro/src/forms/Textarea.astro