components / textarea

Textarea

Multi-line text field with label, helper and error text, and the same focus styles as Input.

How to use

A `<textarea>` with every native prop, a `label`, `helperText` and `errorMessage`. It shares `variant` (`ring` or `outline`), colors, sizes, radius and `customColor` with `Input`, and lets you choose the `resize` handle.

preview

Message

BioA few words about you

Textarea.tsx

import { Textarea } from "vaiperui";
 
<Textarea label="Message" rows={4} />
<Textarea
  label="Bio"
  helperText="A few words about you"
  resize="none"
/>

Colors

preview

primary

success

warning

danger

colors.tsx

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

Sizes

preview

sizes.tsx

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

Resize

preview

none

vertical

both

resize.tsx

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

States

preview

helperExtra detail

helper

errorThis is required

error

disabled

states.tsx

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

Custom color

preview

Orange

custom-color.tsx

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

Props

Prop	Values	Default	Description
variant	ring \| outline	ring	Focus style: a ring or only an outline
variantColor	primary \| success \| warning \| danger	primary	Color of the focus style
customColor	string \| { light, dark }	none	Any CSS color (or a pair per theme). Overrides variantColor
size	sm \| md \| lg	md	Padding and text size
radius	none \| sm \| md \| lg \| full	md	Corner rounding
animation	none \| smooth \| fast \| bounce	smooth	Transition on focus
resize	none \| vertical \| horizontal \| both	vertical	Which directions the user can drag to resize
rows	number	3	Visible lines
label	string	none	Label above the field
helperText	string	none	Help text under the field
errorMessage	string	none	Error text; its presence alone forces the error state
(native)	TextareaHTMLAttributes<HTMLTextAreaElement>	none	value, defaultValue, onChange, placeholder, maxLength, disabled, aria-*, className, ref, etc.

Accessibility

Renders a native `<textarea>`, so role, text editing, selection and spellcheck come from the browser.
`label` is a `<label htmlFor>` tied to the field through its `id` (generated when you do not pass one).
`errorMessage` sets `aria-invalid="true"`, and `aria-describedby` points to the error text, or to `helperText` when there is no error.
Only one description is linked at a time: the error replaces the helper text.
`disabled` and other native attributes (`readOnly`, `required`, `maxLength`) pass straight to the element.

Keep in mind

Without `label`, pass `aria-label` or `aria-labelledby` yourself; the field has no other name.
The error text is not a live region, so it is not announced when it appears; it is read when the field is focused.