Textarea

Import

import { Textarea } from '@tac-ui/web';

Playground

Interactively configure the Textarea props below.

<Textarea placeholder="Enter your message..." />

Sizes

Three size options control the padding, font size, and minimum height of the textarea.

<Textarea size="sm" placeholder="Small textarea" />
<Textarea size="md" placeholder="Medium textarea (default)" />
<Textarea size="lg" placeholder="Large textarea" />

Default

The base textarea renders a resizable multi-line field with the same border and shadow transitions as the Input component.

<Textarea placeholder="Enter your message..." />

With Label

Pass label to render an associated <label> element above the textarea. Use rows to control the initial visible height.

<Textarea label="Description" placeholder="Describe your project..." rows={4} />

With Helper Text

helperText renders a muted hint below the textarea when there is no active error, providing contextual guidance to the user.

<Textarea label="Bio" placeholder="Tell us about yourself..." helperText="Maximum 500 characters." />

Error State

Set error to apply destructive border styling. Pass errorMessage to show an accessible error message below the field.

<Textarea label="Bio" placeholder="Tell us about yourself" error errorMessage="Bio must be at least 20 characters." />

Disabled

The native disabled attribute reduces opacity and blocks all pointer interactions including resize.

<Textarea placeholder="Disabled textarea" disabled />

API Reference