Textarea

Textareas are the spacious cousins of text inputs. They provide room for longer thoughts, detailed feedback, and multi-line content.

Preview

Code

Characters: 0

Installation

First, make sure you have the required dependencies:

npx @rajdevxd/aura-ui add textarea

yarn @rajdevxd/aura-ui add textarea

pnpm dlx @rajdevxd/aura-ui add textarea

bunx --bun @rajdevxd/aura-ui add textarea

Usage

Here's how to add textareas to your forms:

import { Textarea } from "@/components/ui/textarea"

const ContactForm = () => {
  const [message, setMessage] = React.useState('')

  return (
    <Textarea
      placeholder="Enter your message here..."
      value={message}
      onChange={(e) => setMessage(e.target.value)}
      rows={4}
    />
  )
}

Props

Prop	Type	Required	Description
`placeholder`	`string`	No	Placeholder text shown when empty
`value`	`string`	No	The current value of the textarea
`onChange`	`(e: ChangeEvent) => void`	No	Callback when value changes
`rows`	`number`	No	Number of visible text lines
`className`	`string`	No	Additional CSS classes for custom styling

Features

Auto-resizing: Expands naturally with content
Form Integration: Works seamlessly with form libraries
Validation Ready: Supports all standard form validation
Theme Aware: Adapts to your design system styling

Common Issues

"Textarea not resizing!" - The component uses CSS for sizing, check your form layout
"Text not wrapping!" - Ensure proper CSS white-space settings
"Height not adjusting!" - Use the rows prop or custom CSS for height control

Contributing

Textareas handle a lot of user input! Help us improve their UX and accessibility.

Textareas - because sometimes you need more than just a line! 📝

Aura UI