Components

Textarea

A multi-line text input for longer free-form content like comments, descriptions, and feedback. It auto-grows to fit its content and supports labels, validation, and disabled states.

Basic usage

Drop in a Textarea with a placeholder — it inherits a sensible minimum height and grows as the user types.

With a label

Pair with a Label via matching htmlFor and id, and add helper text below for guidance.

Feedback

Your feedback helps us improve.

Disabled

The native disabled attribute blocks interaction, removes the pointer cursor, and dims the field to 50% opacity.

Notes

Props

Prop	Type	Default	Description
`placeholder`	string	`—`	Hint text shown while the field is empty.
`defaultValue`	string	`—`	Initial value for uncontrolled usage.
`value`	string	`—`	Controlled value — pair with onChange.
`rows`	number	`—`	Initial number of visible text lines. The field also auto-grows with content.
`disabled`	boolean	`false`	Disables input and reduces opacity to 50%.
`aria-invalid`	boolean	`false`	Applies the destructive border and ring to signal a validation error.
`className`	string	`—`	Additional Tailwind classes to merge.
`...rest`	TextareaHTMLAttributes	`—`	All native textarea props are forwarded.

Accessibility

Renders a native <textarea>, so keyboard focus, text selection, and multi-line editing work without extra wiring.
Always associate a Label by matching its htmlFor to the textarea's id so screen readers announce the field's purpose.
Set aria-invalid when validation fails — it applies the destructive ring and is exposed to assistive technology.
Focus shows a visible gold focus ring, and the disabled state uses the native attribute so the field is correctly skipped during keyboard navigation.