Composant · Formulaire

Textarea

Stable

Champ de saisie texte multi-ligne, redimensionnable verticalement, avec libellé, texte d'aide et état d'erreur. Partage l'anatomie de champ de l'Input.

Quand l'utiliser

Saisir un texte libre sur plusieurs lignes : description, commentaire, note.
Pour une seule ligne, utilisez Input.
Réglez la hauteur de départ avec l'attribut rows.

États

Défaut

Description

Avec texte d'aide et rows

Notes de version Markdown pris en charge.

Désactivé

Description archivée

Erreur

Retour Un retour est requis avant l'envoi.

Voir le code (Svelte)

<div class="docs-demo-stack">
  <h3>Défaut</h3>
  <Textarea label="Description" placeholder="Contexte opérationnel court" />
  <h3>Avec texte d'aide et rows</h3>
  <Textarea
    label="Notes de version"
    rows={4}
    helperText="Markdown pris en charge."
  />
  <h3>Désactivé</h3>
  <Textarea label="Description archivée" value="Lecture seule." disabled />
  <h3>Erreur</h3>
  <Textarea
    label="Retour"
    rows={4}
    invalid
    errorText="Un retour est requis avant l'envoi."
  />
</div>

Anatomie

Conteneur (.st-field) : libellé + zone + message empilés.
Zone (.st-textarea) : hauteur minimale de 6 rem, resize vertical uniquement.
Message : helperText ou errorText, jamais les deux.

Accessibilité

Le libellé englobe la <textarea> : association native.
aria-invalid="true" est posé en erreur.
Le resize vertical reste possible pour l'utilisateur ; ne le bloquez pas sans raison.

Lignes directrices

À faire

Dimensionner rows selon le contenu attendu.
Indiquer une limite de caractères via helperText si pertinent.

À éviter

Utiliser une Textarea pour une valeur d'une ligne.
Cacher le libellé derrière le placeholder.

API

Prop	Type	Défaut	Description
`label`	`string`	optionnel	Libellé visible.
`helperText`	`string`	optionnel	Texte d'aide (masqué si errorText).
`errorText`	`string`	optionnel	Message d'erreur ; active l'état invalide.
`invalid`	`boolean`	`false`	Force l'état erreur.
`value`	`string \| null`	`""`	Valeur, bindable via bind:value.
`class`	`string`	optionnel	Classe(s) du conteneur.
Autres attributs	`HTMLTextareaAttributes`	N/A	Propagés sur la <textarea> (rows, placeholder, maxlength…).

Tokens utilisés

--st-component-field-labelText
--st-component-field-helpText
--st-component-field-errorText
--st-component-control-background
--st-component-control-border
--st-component-control-hoverBorder
--st-component-control-hoverBackground
--st-component-control-focusRing
--st-component-control-invalidBorder
--st-component-control-disabledBackground