TextArea

A multi-line text input component for longer form content. Supports labels, hints, character counters, validation states, and multiple sizes. Available as compound components for maximum flexibility or as a pre-composed TextAreaInput for simple use cases.

Basic Usage

import { TextAreaInput } from '@/components'

<TextAreaInput placeholder="Share your thoughts..." />

With Label and Hint

Add a label and helper text to guide users.

<TextAreaInput
  label="Description"
  placeholder="Enter a description..."
  hint="Provide a detailed description of your project."
/>

Description

Provide a detailed description of your project.

Sizes

The textarea comes in three sizes: X-Small (113px), Small (127px, default), and Medium (141px).

X-Small (113px)

X-Small TextArea

Small (127px) - Default

Small TextArea

Medium (141px)

Medium TextArea

X-Small

<TextAreaInput size="xs" label="X-Small TextArea" placeholder="X-Small size..." />

Small (Default)

<TextAreaInput size="sm" label="Small TextArea" placeholder="Small size..." />

Medium

<TextAreaInput size="md" label="Medium TextArea" placeholder="Medium size..." />

Character Counter

Display a character counter that automatically tracks the textarea's content. The counter will change color when approaching or exceeding the limit.

<TextAreaInput
  label="Bio"
  placeholder="Tell us about yourself..."
  hint="Keep it brief and engaging."
  maxLength={200}
  showCounter
/>

Bio

0/200

Keep it brief and engaging.

Counter with Warning Threshold

Set a custom warning threshold (default is 90%) to indicate when the user is approaching the limit.

<TextAreaInput
  label="Comment"
  placeholder="Write a comment..."
  maxLength={150}
  showCounter
  warningThreshold={80}
/>

Comment

137/150

Required Fields

Use the required prop to show a required indicator (blue asterisk).

<TextAreaInput
  label="Feedback"
  placeholder="Share your feedback..."
  hint="This field is required"
  required
/>

Feedback

This field is required

Optional Fields

Use showOptionalBadge to indicate optional fields.

<TextAreaInput
  label="Additional Notes"
  placeholder="Any additional notes..."
  showOptionalBadge
/>

Additional Notes(Optional)

This field is optional

Error State

Show validation errors with the error prop. Pass a string to display an error message, or true for styling only.

Error with message

Description

Description must be at least 50 characters

Error styling only

Message

Please provide a valid message

Error with Message

<TextAreaInput
  label="Description"
  placeholder="Enter description..."
  error="Description must be at least 50 characters"
/>

Error Styling Only

<TextAreaInput
  label="Message"
  placeholder="Enter message..."
  error
  hint="Please provide a valid message"
/>

Disabled State

Disabled textareas cannot be interacted with.

Disabled empty

Disabled

Disabled with value

Disabled

<TextAreaInput label="Disabled" placeholder="Cannot edit..." disabled />

Resize Behavior

Control the resize behavior of the textarea.

Vertical resize (default)

Resizable Vertically

No resize

Fixed Size

Both directions

Resizable Both

Vertical (Default)

<TextAreaInput label="Resizable" placeholder="Drag to resize..." resize="vertical" />

No Resize

<TextAreaInput label="Fixed" placeholder="Cannot resize..." resize="none" />

Both Directions

<TextAreaInput label="Free Resize" placeholder="Resize any direction..." resize="both" />

Compound Components

For maximum flexibility, use the compound component API to build custom textarea layouts.

import { TextArea } from '@/components'

<TextArea.Root size="sm" required maxLength={200}>
  <TextArea.Label>
    Project Description
    <TextArea.RequiredIndicator />
    <TextArea.InfoIcon />
  </TextArea.Label>
  <TextArea.Field>
    <TextArea.Native placeholder="Describe your project..." />
    <TextArea.Counter />
  </TextArea.Field>
  <TextArea.Hint>Provide a clear and concise description.</TextArea.Hint>
</TextArea.Root>

Project Description

0/200

Provide a clear and concise description.

Controlled Input

Control the textarea value externally with validation feedback.

Review

0/500

Minimum 20 characters required

Current length: 0

const [value, setValue] = useState('')
const isValid = value.length >= 20

<TextAreaInput
  label="Review"
  placeholder="Write your review..."
  value={value}
  onChange={(e) => setValue(e.target.value)}
  error={value.length > 0 && !isValid ? 'Review must be at least 20 characters' : undefined}
  hint={isValid ? 'Review looks good!' : 'Minimum 20 characters required'}
  maxLength={500}
  showCounter
  required
/>

All States Overview

X-Small (113px)

Default

Description

0/200