TextArea

A multi-line text input component with support for labels, character counting, and validation states.

Installation

npx vayu-ui init #one time only

npx vayu-ui add textarea

npx vayu-ui add -t textarea #with test case needs

TextArea Example

Description

Bio0/200

Comments

Your feedback helps us improve our services.

Sizes

Small

Medium

Large

States

Error State

Description must be at least 10 characters.

Please enter a valid description.

Disabled State

Resize Options

No Resize

Vertical Resize (default)

Horizontal Resize

Both Resize

Character Count

Message

0/100

Validation Guidelines

Feedback Guidelines

Be specific and constructive
Include examples when possible
Keep it respectful

Minimum 20 characters required
Must include specific details

Form Actions

Your Message

Press submit when you're done.

// Default usage
<TextArea>
  <TextArea.Label>Description</TextArea.Label>
  <TextArea.Input placeholder="Enter a description..." />
</TextArea>

// With Character Count in Label
<TextArea maxLength={200}>
  <TextArea.Label showCharCount>Bio</TextArea.Label>
  <TextArea.Input placeholder="Tell us about yourself" />
</TextArea>

// With Standalone Character Count
<TextArea maxLength={100}>
  <TextArea.Label>Message</TextArea.Label>
  <TextArea.Input placeholder="Type your message..." />
  <TextArea.CharCount />
</TextArea>

// Validation State with Support/Error Text
<TextArea error>
  <TextArea.Label>Error State</TextArea.Label>
  <TextArea.Input placeholder="Invalid input" defaultValue="Bad" />
  <TextArea.SupportText>Description must be at least 10 characters.</TextArea.SupportText>
  <TextArea.ErrorText>Please enter a valid description.</TextArea.ErrorText>
</TextArea>

// Resize Options
<TextArea>
  <TextArea.Label>No Resize</TextArea.Label>
  <TextArea.Input resize="none" placeholder="Fixed size" />
</TextArea>

Anatomy

import { TextArea } from 'vayu-ui';

<TextArea>
  <TextArea.Label />
  <TextArea.Input />
  <TextArea.SupportText />
  <TextArea.ErrorText />
  <TextArea.CharCount />
</TextArea>;

Accessibility

Keyboard support: Full keyboard navigation. The text area is accessible and navigable via Tab.
ARIA attributes: Uses aria-invalid indicating validation error state. The label, support text, and error text are programmatically tied to the input using aria-labelledby and aria-describedby respectively.
Focus behavior: Focus styles apply precisely on the input to clearly indicate user interaction.

Screen readers will announce the label linked to the text area. If the component mounts with an error state, any defined TextArea.ErrorText description will be announced immediately as part of the description due to aria-describedby. Character count updates are announced programmatically when limits are near.

Component Folder Structure

packages/ui/src/components/ui/TextArea/
├── README.md
├── TextArea.tsx
├── TextAreaCharCount.tsx
├── TextAreaErrorText.tsx
├── TextAreaInput.tsx
├── TextAreaLabel.tsx
├── TextAreaSupportText.tsx
├── index.ts
└── types.ts

Props

TextArea

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	The size of the text area elements.
`error`	`boolean`	`false`	Sets the component to an error validation state.
`maxLength`	`number`	-	Defines the maximum characters limit for the area and count indicator.
`disabled`	`boolean`	`false`	Whether the text area is disabled.
`className`	`string`	-	Additional class names for styling.

TextArea.Label

Prop	Type	Default	Description
`showCharCount`	`boolean`	`false`	Inline character count within the label. Requires `maxLength` on Root.
...	`LabelHTMLAttributes<HTMLLabelElement>`	-	Supports any standard native label attributes.

TextArea.Input

Prop	Type	Default	Description
`resize`	`"none" \| "vertical" \| "horizontal" \| "both"`	`"vertical"`	Controls the resize behavior of the area box.
...	`Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size">`	-	Supports any standard native textarea attributes except `size`.

TextArea.SupportText

Prop	Type	Default	Description
`children`	`string \| string[]`	-	Hint text or guidelines, accepts single string or array of strings.
`className`	`string`	-	Additional class names for styling.

TextArea.ErrorText

Prop	Type	Default	Description
`children`	`string \| string[]`	-	Error text to display, accepts single string or array of strings.
`className`	`string`	-	Additional class names for styling.

TextArea.CharCount

Prop	Type	Default	Description
`className`	`string`	-	Additional class names for styling.

TextArea

Installation

Usage

TextArea Example

Sizes

States

Resize Options

Character Count

Validation Guidelines

Form Actions

Anatomy

Accessibility

Component Folder Structure

Props

TextArea

TextArea.Label

TextArea.Input

TextArea.SupportText

TextArea.ErrorText

TextArea.CharCount

On this page