Textarea

Multi-line text input for longer content. Supports labels, hints, validation states, and resizing.

Default

A basic textarea with label, hint text, and required indicator.

Default Textarea

This is a hint text to help user.

Disabled

A disabled textarea that cannot be interacted with. Resizing is also disabled.

Disabled

Invalid / Error

Pass an error prop to show validation state with a red border and error message.

Error State

This field is required.

Usage

Import the Textarea component and configure with props.

tsx
import { Textarea } from "@/components/ui/Textarea";

// Basic
<Textarea
    label="Description"
    placeholder="Enter a description..."
    rows={5}
/>

// Required with hint
<Textarea
    isRequired
    label="Description"
    hint="This is a hint text to help user."
    placeholder="This is a placeholder."
    rows={5}
/>

// Error state
<Textarea
    isRequired
    label="Description"
    error="This field is required."
    rows={5}
/>

// Disabled
<Textarea
    label="Description"
    placeholder="Disabled textarea"
    rows={5}
    disabled
/>

Props

PropTypeDefaultDescription
labelstring—Label text above the textarea.
errorstring—Error message. Replaces hint when present.
hintstring—Helper/hint text below the textarea.
helperTextstring—Alias for hint (backward compatible).
isRequiredbooleanfalseShow required asterisk on label.
disabledbooleanfalseDisable the textarea.
rowsnumber—Number of visible text rows.
placeholderstring—Placeholder text.
wrapperClassNamestring—Additional CSS class for the wrapper.