Textarea

Import

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

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 transitions as the Input component.

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

With Label

Pass label to render a text label 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 error message below the field.

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

Disabled

Set editable to false to disable the textarea. It renders at reduced opacity and ignores all user interaction.

<Textarea placeholder="Disabled textarea" editable={false} />

API Reference