Textarea

El componente textarea se utiliza para recopilar entradas de texto multilínea de los usuarios. Es ideal para campos que requieren descripciones largas, comentarios o cualquier contenido que necesite múltiples líneas.

Properties

Además de las propiedades comunes, el componente textarea acepta las siguientes propiedades específicas:

Basic Properties

Property	Type	Required	Default	Description
`type`	`"textarea"`	Yes	-	Especifica el tipo como textarea
`schema`	`z.ZodType`	Yes	-	Esquema Zod para validación. Requerido
`placeholder`	`string`	No	-	Texto de placeholder que se muestra cuando el textarea está vacío
`rows`	`number`	No	`3`	Número de filas visibles por defecto (1-20 recomendado)
`maxLength`	`number`	No	-	Número máximo de caracteres permitidos
`value`	`string`	No	-	Valor inicial del textarea

Examples

Basic Textarea

Un textarea básico con validación

import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const BasicTextarea = createExampleForm({
  formId: "basic-textarea",
  fields: {
    description: {
      type: "textarea",
      label: "Descripción",
      placeholder: "Escribe una descripción detallada...",
      rows: 10,
      schema: z
        .string()
        .min(10, "La descripción debe tener al menos 10 caracteres"),
      helperText: "Mínimo 10 caracteres",
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["description"],
    },
  },
});

Textarea con Icono

Un textarea con un icono descriptivo

import { MessageSquare } from "lucide-react";
import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const IconTextarea = createExampleForm({
  formId: "icon-textarea-example",
  fields: {
    message: {
      type: "textarea",
      label: "Mensaje",
      placeholder: "Escribe tu mensaje aquí...",
      rows: 4,
      icon: <MessageSquare />,
      iconProps: {
        className: "text-muted-foreground",
      },
      helperText: "El mensaje debe tener entre 10 y 500 caracteres",
      schema: z
        .string()
        .min(10, "El mensaje debe tener al menos 10 caracteres")
        .max(500, "El mensaje no puede exceder los 500 caracteres"),
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["message"],
    },
  },
});

Styled Textarea

Un textarea con estilos personalizados

import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const StyledTextarea = createExampleForm({
  formId: "styled-textarea",
  fields: {
    bio: {
      type: "textarea",
      label: "Biografía",
      placeholder: "Cuéntanos sobre ti...",
      rows: 6,
      schema: z
        .string()
        .min(20, "La biografía debe tener al menos 20 caracteres"),
      helperText: "Mínimo 20 caracteres",
      input_className: "bg-muted/50 border-primary/20 focus:border-primary/50",
      label_className: "text-lg font-semibold text-primary",
      helper_className: "text-sm text-muted-foreground/80",
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["bio"],
    },
  },
});

Resizable Textarea

Un textarea redimensionable

import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const ResizableTextarea = createExampleForm({
  formId: "resizable-textarea",
  fields: {
    notes: {
      type: "textarea",
      label: "Notas",
      placeholder: "Escribe tus notas aquí...",
      rows: 3,
      schema: z.string().optional(),
      helperText: "Puedes redimensionar el área de texto según necesites",
      input_className: "resize-y min-h-[100px] max-h-[300px]",
    },
    code: {
      type: "textarea",
      label: "Código",
      placeholder: "Pega tu código aquí...",
      rows: 5,
      schema: z.string().optional(),
      helperText: "Área de texto con altura fija",
      input_className: "resize-none font-mono text-sm",
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["notes", "code"],
    },
  },
});

Best Practices

Proporciona un tamaño adecuado: Usa la propiedad rows para establecer un tamaño inicial apropiado para el contenido esperado
Establece límites claros: Usa maxLength cuando sea necesario para limitar la longitud del texto
Usa placeholder descriptivo: Proporciona ejemplos o instrucciones claras en el placeholder
Considera la accesibilidad: Asegúrate de que el textarea sea accesible por teclado y tenga etiquetas descriptivas
Implementa validación: Usa esquemas Zod para validar el contenido según tus necesidades

Accessibility

El textarea es automáticamente asociado con su etiqueta
Los mensajes de error son anunciados correctamente a los lectores de pantalla
El componente sigue las mejores prácticas de ARIA
La navegación por teclado está completamente soportada
El textarea es redimensionable por defecto, lo que ayuda a los usuarios a ver más contenido