Brickslab.

@brickslab/ui-web

Champ texte multi-lignes contrôlé. Supporte label, placeholder, textes d'aide et d'erreur, 3 tailles, compteur de caractères et autoResize. Aucun 'use client' dans ui-web — le composant est entièrement contrôlé via props.

Aperçu

textarea basique · placeholder

basique
avec label

Tailles

sm · md · lg

sm
md
lg

Rows

rows=2 · rows=6

rows=2
rows=6

AutoResize

grandit avec le contenu, ne rétrécit pas sous rows

Ajoutez des lignes pour voir l'expansion automatique.

Compteur de caractères

maxLength active le compteur — rouge à la limite

Maximum 100 caractères.

13/100
13/100

États

error · disabled · readOnly

error

Ce champ est requis.

disabled
readOnly

Redimensionnement

resize="none" · resize="vertical" (défaut) · resize="both"

none
vertical (défaut)
both

Label et texte d'aide

label · helperText · required (astérisque)

Décrivez votre projet en quelques phrases.

Pleine largeur

fullWidth — s'étire à 100% du conteneur

Ce textarea occupe toute la largeur disponible.

Props

PropTypeDéfautRequisDescription
valuestring—✓Valeur contrôlée du textarea.
onChange(value: string) => void—✓Callback déclenché à chaque frappe, reçoit la valeur string.
labelstring——Label affiché au-dessus du textarea, lié via htmlFor.
placeholderstring——Texte indicatif affiché quand le textarea est vide.
helperTextstring——Texte d'aide affiché sous le textarea (en muted). Masqué si errorText est présent.
errorTextstring——Message d'erreur affiché sous le textarea (en rouge). Active aussi la bordure rouge.
disabledbooleanfalse—Désactive le textarea (opacité 0.5, curseur not-allowed).
readOnlybooleanfalse—Rend le textarea en lecture seule.
size"sm" | "md" | "lg""md"—Taille du textarea (padding et taille de police).
fullWidthbooleanfalse—Étire le textarea à 100% de la largeur du conteneur.
rowsnumber4—Nombre de lignes visibles par défaut.
maxLengthnumber——Longueur maximale. Active le compteur {length}/{maxLength} si fourni.
resize"none" | "vertical" | "both""vertical"—Contrôle la poignée de redimensionnement CSS. Ignoré si autoResize est actif.
autoResizebooleanfalse—Ajuste automatiquement la hauteur au contenu via scrollHeight.
idstring——ID HTML du textarea. Auto-généré via React.useId() si non fourni.
namestring——Nom du champ pour les formulaires HTML natifs.
requiredbooleanfalse—Marque le champ comme requis (astérisque rouge sur le label).

Utilisation

tsx
import { Textarea } from "@brickslab/ui-web";

// Basique
<Textarea value={text} onChange={setText} placeholder="Saisir un texte..." />

// Avec label et helper
<Textarea
  value={text}
  onChange={setText}
  label="Description"
  helperText="Décrivez votre projet en quelques lignes."
  rows={5}
/>

// Avec compteur
<Textarea
  value={text}
  onChange={setText}
  label="Bio"
  maxLength={200}
  placeholder="Parlez-nous de vous..."
/>

// AutoResize
<Textarea
  value={text}
  onChange={setText}
  autoResize
  placeholder="Ce textarea grandit avec votre texte..."
/>

// Erreur
<Textarea
  value={text}
  onChange={setText}
  label="Message"
  errorText="Ce champ est requis."
/>

// Tailles
<Textarea size="sm" value={text} onChange={setText} />
<Textarea size="md" value={text} onChange={setText} />
<Textarea size="lg" value={text} onChange={setText} />