TextArea

Zone de texte multiligne avec ref forwarding et support de toutes les props HTML natives. Le redimensionnement est désactivé par défaut pour un rendu homogène.

Démo en direct

Biographie

Notes internes

La zone de texte conserve le même style que les inputs du toolkit.

Code source complet — copier-coller

Exemple d'une zone de texte avec label.

"use client";

import { useState } from "react";
import { TextArea } from "@ramses1er/cbk-toolkit/client";

export default function BioField() {
  const [bio, setBio] = useState("");

  return (
    <div>
      <label className="font-semibold text-gray-600 block">
        Biographie
      </label>
      <TextArea
        placeholder="Parlez-nous de vous..."
        value={bio}
        onChange={(e) => setBio(e.target.value)}
        rows={4}
      />
    </div>
  );
}

Utilisation — avec FieldContainer et Label

Pattern standard : combiner FieldContainer , Label et TextArea .

import { FieldContainer, Label, TextArea } from "@ramses1er/cbk-toolkit/client";

<FieldContainer>
  <Label>Biographie</Label>
  <TextArea
    placeholder="Parlez-nous de vous..."
    value={form.bio}
    onChange={(e) => setForm({ ...form, bio: e.target.value })}
    rows={4}
  />
</FieldContainer>

Props

Prop	Type	Défaut	Description
ref	React.Ref<HTMLTextAreaElement>	—	Ref forwarding vers l'élément `<textarea>` natif
...props	TextareaHTMLAttributes	—	Toutes les props HTML natives (rows, placeholder, value, onChange, disabled, etc.)

Comportement

Utilise resize-nonepour empêcher le redimensionnement par l'utilisateur
Supporte le ref forwardingpour un accès direct au DOM
Les classes de base incluent le focus ring, les bordures arrondies et la transition
Style homogène avec les autres composants de formulaire (Input, Select, DatePicker)