Textarea

Área de texto multilínea. Comparte variantes (outline, filled, flushed) y tamaños con Input. Ofrece contador de caracteres opcional (showCount + maxLength), control de redimensionado (resize) y número de filas (rows).

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { Textarea } from "@tsukira/ui"; <Textarea label="Descripción" rows={4} placeholder="Escribe aquí…" /><Textarea  label="Bio"  maxLength={160}  showCount  helperText="Máximo 160 caracteres."/>

Ejemplos#

Playground

cambia las props y el código se regenera

Descripción

0/200

label

helperText

errorText

size

variant

isInvalid

Inactivo

fullWidth

Inactivo

resize

rows

showCount

Activo

Variantes

outline · filled · flushed

Outline

Filled

Flushed

Contador de caracteres

showCount + maxLength

Bio pública

Se mostrará en tu perfil.

0/160

Estados

helperText · isInvalid + errorText · disabled

Descripción del proyecto

Sé conciso: qué hace y a quién va dirigido.

Motivo de reclamación

Debes indicar el motivo para continuar.

Notas internas

Fusión: formulario de feedback

FormField + Textarea + Button

¿Cómo podemos mejorar?

0/500

Tu opinión es anónima y nos ayuda a priorizar.

Fusión: caja de comentario con avatar

Avatar + Textarea + Button

API#

TextareaPropsextends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>

Prop	Tipo	Default	Descripción
`label`	`string`	—	—
`helperText`	`string`	—	—
`errorText`	`string`	—	—
`size`	`'sm' \| 'md' \| 'lg'`	—	—
`variant`	`'outline' \| 'filled' \| 'flushed'`	—	—
`isInvalid`	`boolean`	—	—
`fullWidth`	`boolean`	—	—
`resize`	`'none' \| 'vertical' \| 'horizontal' \| 'both'`	—	Resize: 'none' \| 'vertical' (default) \| 'horizontal' \| 'both'.
`rows`	`number`	4	Filas (atributo nativo rows). Default 4.
`showCount`	`boolean`	—	Mostrar contador de caracteres (requiere maxLength).