componentes / textarea

Textarea

Campo de texto de varias líneas con etiqueta, texto de ayuda y de error, y los mismos estilos de foco que Input.

Cómo usar

Un `<textarea>` con todas las props nativas, `label`, `helperText` y `errorMessage`. Comparte `variant` (`ring` u `outline`), colores, tamaños, radius y `customColor` con `Input`, y permite elegir el `resize`.

preview

Mensaje

BioUnas palabras sobre ti

Textarea.tsx

import { Textarea } from "vaiperui";
 
<Textarea label="Mensaje" rows={4} />
<Textarea
  label="Bio"
  helperText="Unas palabras sobre ti"
  resize="none"
/>

Colores

preview

primary

success

warning

danger

colores.tsx

<Textarea variantColor="primary" placeholder="primary" />
<Textarea variantColor="success" placeholder="success" />
<Textarea variantColor="warning" placeholder="warning" />
<Textarea variantColor="danger" placeholder="danger" />

Tamaños

preview

tamanos.tsx

<Textarea size="sm" placeholder="sm" />
<Textarea size="md" placeholder="md" />
<Textarea size="lg" placeholder="lg" />

Redimensionar

preview

none

vertical

both

redimensionar.tsx

<Textarea resize="none" />
<Textarea resize="vertical" />
<Textarea resize="both" />

Estados

preview

ayudaDetalle extra

ayuda

errorEsto es obligatorio

error

deshabilitado

estados.tsx

<Textarea label="..." helperText="..." />
<Textarea label="..." errorMessage="..." />
<Textarea label="..." disabled />

Color personalizado

preview

Naranja

color-personalizado.tsx

<Textarea customColor="#ff6600" label="Naranja" />

Props

Prop	Valores	Predeterminado	Descripción
variant	ring \| outline	ring	Estilo de foco: anillo o solo contorno
variantColor	primary \| success \| warning \| danger	primary	Color del estilo de foco
customColor	string \| { light, dark }	ninguno	Cualquier color CSS (o un par por tema). Reemplaza a variantColor
size	sm \| md \| lg	md	Espaciado y tamaño del texto
radius	none \| sm \| md \| lg \| full	md	Redondeo de las esquinas
animation	none \| smooth \| fast \| bounce	smooth	Transición al enfocar
resize	none \| vertical \| horizontal \| both	vertical	En qué direcciones puede arrastrar el usuario para redimensionar
rows	number	3	Líneas visibles
label	string	ninguno	Etiqueta sobre el campo
helperText	string	ninguno	Texto de ayuda bajo el campo
errorMessage	string	ninguno	Texto de error; su sola presencia fuerza el estado de error
(nativas)	TextareaHTMLAttributes<HTMLTextAreaElement>	ninguno	value, defaultValue, onChange, placeholder, maxLength, disabled, aria-*, className, ref, etc.

Accesibilidad

Renderiza un `<textarea>` nativo, así que el rol, la edición de texto, la selección y el corrector ortográfico vienen del navegador.
`label` es un `<label htmlFor>` vinculado al campo mediante su `id` (generado si no pasas uno).
`errorMessage` define `aria-invalid="true"` y `aria-describedby` apunta al texto de error, o al `helperText` cuando no hay error.
Solo se vincula una descripción a la vez: el error reemplaza al texto de ayuda.
`disabled` y los demás atributos nativos (`readOnly`, `required`, `maxLength`) pasan directo al elemento.

Ten en cuenta

Sin `label`, pasa `aria-label` o `aria-labelledby`; el campo no tiene otro nombre.
El texto de error no es una live region, así que no se anuncia al aparecer; se lee cuando el campo recibe el foco.