Textarea

Inputs

Stablev1.0.0

Multi-line text input component with auto-resize support and validation states

Preview

Installation

npx @component-labs/cli add textarea

This will:
- Install required dependencies
- Copy the Textarea component to your project
- Add utility functions (cn helper)

Make sure you've initialized Component Labs first:
```bash
npx @component-labs/cli init
```

Usage

import { Textarea } from "@component-labs/ui";

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

Props

Name	Type	Default	Description
`variant`	`"default" \| "error"`	`"default"`	Visual style variant
`resize`	`"none" \| "vertical" \| "horizontal" \| "both"`	`"vertical"`	Resize behavior (disabled when autoResize is true)
`error`	`string`	`-`	Error message to display
`autoResize`	`boolean`	`false`	Whether the textarea should automatically resize based on content
`minRows`	`number`	`3`	Minimum number of rows when autoResize is enabled
`maxRows`	`number`	`-`	Maximum number of rows when autoResize is enabled
`rows`	`number`	`3`	Number of visible rows (when autoResize is disabled)
`disabled`	`boolean`	`-`	Whether the textarea is disabled
`placeholder`	`string`	`-`	Placeholder text
`className`	`string`	`-`	Additional CSS classes

Examples

Basic

A simple textarea

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

With Error

Textarea with error state

<Textarea
  error="This field is required"
  placeholder="Required field"
/>

Auto Resize

Textarea that grows with content

<Textarea
  autoResize
  minRows={3}
  maxRows={10}
  placeholder="Type to see auto-resize..."
/>

Disabled

Disabled textarea

<Textarea disabled placeholder="Cannot edit" />

No Resize

Textarea with resize disabled

<Textarea resize="none" rows={5} />

Performance

Bundle Size

~2KB gzipped

Minified and gzipped

Dependencies

•class-variance-authority
•clsx
•tailwind-merge

Accessibility

•Proper ARIA attributes for error states
•Keyboard navigation support
•Focus management
•Screen reader friendly error messages