Textarea

The Textarea component provides a multi-line text input field. It extends the standard HTML textarea element with Voice UI Kit styling and variants.

import { Textarea } from "@pipecat-ai/voice-ui-kit";

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

Component Variants

Textarea

The Textarea component provides a styled multi-line text input.

import { Textarea } from "@pipecat-ai/voice-ui-kit";

<Textarea placeholder="Type here..." />

Usage

Basic Usage

Create a simple textarea input.

import { Textarea } from "@pipecat-ai/voice-ui-kit";

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

Different Sizes

Use different size variants.

import { Textarea } from "@pipecat-ai/voice-ui-kit";

<div className="space-y-2">
  <Textarea size="sm" placeholder="Small" />
  <Textarea size="md" placeholder="Medium" />
  <Textarea size="lg" placeholder="Large" />
  <Textarea size="xl" placeholder="Extra Large" />
</div>

Non-resizable

Disable vertical resizing.

import { Textarea } from "@pipecat-ai/voice-ui-kit";

<Textarea 
  multiline={false}
  placeholder="Fixed height textarea"
/>

Custom Styling

Apply custom classes for additional styling.

import { Textarea } from "@pipecat-ai/voice-ui-kit";

<Textarea 
  className="min-h-32 font-mono"
  placeholder="Custom styled textarea"
/>

Disabled State

Disable the textarea.

import { Textarea } from "@pipecat-ai/voice-ui-kit";

<Textarea 
  disabled
  placeholder="Disabled textarea"
  value="This is disabled"
/>

Resizing Behavior

• multiline=: Textarea can be resized vertically by dragging the bottom-right corner
• multiline=: Textarea has a fixed height and cannot be resized

Size Variants

The textarea supports the same size variants as the Input component:

• sm: Small padding (py-0.75)
• md: Medium padding (py-1.25)
• lg: Large padding (py-2.25)
• xl: Extra large padding (py-3.25)

Integration

The Textarea component:

• Extends standard HTML textarea attributes
• Uses inputVariants for consistent styling with Input component
• Supports field-sizing-content for automatic height adjustment
• Integrates with Voice UI Kit theme system

It's a standalone component that doesn't require any context providers.