Text Area

Text areas allow users to enter and edit multi-line text. They support floating labels, character counters, validation states, and are resizable.

TextArea Playground

Installation

You can add the text area component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install class-variance-authority clsx tailwind-merge @phosphor-icons/react

Copy and paste the following code into your project.

TextArea.tsx

cn.ts

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

import { TextArea } from '@versaui/ui/components/TextArea';

<TextArea label="Message" placeholder="Enter your message..." />

Character Counter

Show a counter with optional max length:

<TextArea
  label="Bio"
  placeholder="Tell us about yourself..."
  showCounter
  maxLength={250}
/>

Validation States

Set status to show validation states:

<TextArea
  label="Description"
  status="error"
  errorText="Description is required"
/>

<TextArea
  label="Notes"
  status="success"
  helperText="Your notes have been saved"
/>

Floating Label

// With floating label (default)
<TextArea label="Comments" showFloatingLabel />

// Without floating label
<TextArea
  label="Comments"
  showFloatingLabel={false}
  placeholder="Add a comment..."
/>

Disabled and Read-Only

<TextArea label="Archived Notes" disabled value="These notes are read-only" />
<TextArea label="Summary" readOnly value="This is read-only content" />

Accessibility

Uses native <textarea> for full accessibility
Floating label serves as accessible label
Error and helper text linked via aria-describedby
Required state announced via aria-required
Focus ring visible on keyboard navigation

TextArea Props

Prop	Type	Default	Description
`label`	`string`	`''`	Floating label text.
`placeholder`	`string`	`'Placeholder'`	Placeholder text.
`status`	`'default' \| 'error' \| 'success'`	`'default'`	Validation status.
`helperText`	`string`	`—`	Helper text below input.
`errorText`	`string`	`—`	Error text (shown on error status).
`disabled`	`boolean`	`false`	Prevents interaction.
`readOnly`	`boolean`	`false`	Read-only state.
`required`	`boolean`	`false`	Mark as required.
`showFloatingLabel`	`boolean`	`true`	Use floating label animation.
`showCounter`	`boolean`	`false`	Show character counter.
`showResizeIcon`	`boolean`	`true`	Show resize handle.
`maxLength`	`number`	`—`	Maximum character count.
`rows`	`number`	`3`	Initial number of rows.

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page