Textarea

Campo de texto multilínea con label, hint y error integrados.

---

Import

import { Textarea } from '@imansi/ui';

---

Uso básico

<Textarea placeholder="Escribí tu mensaje..." />

---

Con label

<Textarea
  label="Mensaje"
  placeholder="Contanos qué necesitás..."
  rows={5}
/>

---

Con hint y error

<Textarea
  label="Biografía"
  hint="Máximo 280 caracteres"
  placeholder="Contá algo sobre vos..."
/>

<Textarea
  label="Comentario"
  error="El comentario es obligatorio"
/>

---

Filas personalizables

<Textarea rows={3} placeholder="Corto" />
<Textarea rows={8} placeholder="Largo" />

---

Props

Prop	Tipo	Default	Descripción
label	string	—	Etiqueta del campo
hint	string	—	Texto de ayuda
error	string	—	Mensaje de error
rows	number	4	Cantidad de filas visibles
id	string	autogenerado	ID del textarea
className	string	—	Clases adicionales
...props	TextareaHTMLAttributes	—	Props nativas de <textarea>

---

Ejemplo completo

import { useState } from 'react';
import { Textarea, Button } from '@imansi/ui';

export function FormularioContacto() {
  const [mensaje, setMensaje] = useState('');
  const [error, setError] = useState('');

  function handleSubmit(e) {
    e.preventDefault();

    if (mensaje.length < 10) {
      setError('El mensaje debe tener al menos 10 caracteres');
      return;
    }

    setError('');
    // enviar
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-lg">
      <Textarea
        label="Tu mensaje"
        value={mensaje}
        onChange={(e) => setMensaje(e.target.value)}
        error={error}
        hint={`${mensaje.length}/280 caracteres`}
        rows={6}
        maxLength={280}
      />
      <Button type="submit">Enviar mensaje</Button>
    </form>
  );
}