Composants

Textarea

Le champ de saisie multi-lignes. Enrobe le TextArea d'Astryx : même logique contrôlé/non-contrôlé que TextField, libellé a11y obligatoire et hauteur réglable via rows.

Comme TextField, label est obligatoire et masqué par défaut. Passe isLabelHidden= pour un libellé visible.

import { Textarea } from "@forme-ch/ui/controls";

const [value, setValue] = useState("");

<Textarea
  label="Notes internes"
  isLabelHidden={false}
  value={value}
  onChange={setValue}
  placeholder="Contexte, remarques, suites à donner…"
  description="Visible uniquement par l'équipe, jamais par le client."
  rows={4}
  maxLength={500}
/>

États

<Textarea label="Requis" isLabelHidden={false} isRequired rows={3} />
<Textarea label="Optionnel" isLabelHidden={false} isOptional rows={3} />
<Textarea label="Lecture seule" isLabelHidden={false} isReadOnly rows={3} />
<Textarea label="Désactivé" isLabelHidden={false} isDisabled rows={3} />

Props

Prop	Type	Défaut	Description
`label` *	`string`	—	Libellé a11y obligatoire. Masqué visuellement si `isLabelHidden`.
`isLabelHidden`	`boolean`	`true`	Masque le libellé visuel. Passe `false` pour l'afficher.
`name`	`string`	—	Nom du champ dans un `<form>` (mappé sur `htmlName`).
`value`	`string`	—	Mode contrôlé.
`defaultValue`	`string`	—	Mode non-contrôlé.
`onChange`	`(value: string) => void`	—	Callback (mode contrôlé).
`placeholder`	`string`	—	Texte indicatif.
`description`	`string`	—	Aide sous le champ.
`rows`	`number`	—	Nombre de lignes visibles.
`isDisabled`	`boolean`	—	Désactive le champ.
`isReadOnly`	`boolean`	—	Lecture seule.
`isRequired`	`boolean`	—	Marque le champ requis.
`isOptional`	`boolean`	—	Marque explicitement le champ facultatif.
`hasAutoFocus`	`boolean`	—	Focus au montage.
`maxLength`	`number`	—	Validation native (posée sur le `<textarea>` DOM).
`minLength`	`number`	—	Validation native.
`startIcon`	`ReactNode`	—	Icône en tête de champ.
`width`	`number \| string`	—	Largeur du champ.

Accepte aussi className et style.

Accessibilité

Le nom accessible vient de label (obligatoire, jamais retiré même quand il est masqué). Utilise description pour préciser l'usage du champ. maxLength et minLength sont posés sur le <textarea> DOM natif pour la validation.

Do & Don't

✓ À faire

Fixer rows selon le volume attendu. Signaler la limite via maxLength.

✕ À éviter

Utiliser un Textarea pour une saisie mono-ligne — préférer TextField.