The Textarea component provides a multi-line text input field with automatic height adjustment and consistent styling.
Installation
npx shadcn@latest add @eo-n/textarea
Copy component code
Copy and paste the textarea component code into your project at components/ui/textarea.tsx.
Update imports
Update the import paths to match your project setup.
import { Textarea } from "@/components/ui/textarea";
export default function Example() {
return <Textarea placeholder="Enter your message..." />;
}
Examples
Default
<Textarea placeholder="Type your message here..." />
With Label
import { Label } from "@/components/ui/label";
<div className="space-y-2">
<Label htmlFor="message">Message</Label>
<Textarea id="message" placeholder="Tell us what you think..." />
</div>
Disabled
<Textarea disabled placeholder="This textarea is disabled" />
With Validation Error
<Textarea aria-invalid placeholder="This field has an error" />
With Custom Rows
<Textarea rows={10} placeholder="Larger text area..." />
With Character Count
import { useState } from "react";
function TextareaWithCount() {
const [value, setValue] = useState("");
const maxLength = 200;
return (
<div className="space-y-2">
<Textarea
value={value}
onChange={(e) => setValue(e.target.value)}
maxLength={maxLength}
placeholder="Enter text..."
/>
<p className="text-sm text-muted-foreground">
{value.length}/{maxLength}
</p>
</div>
);
}
API Reference
Textarea
Extends all props from the native HTML textarea element.
Placeholder text displayed when the textarea is empty.
Whether the textarea is disabled.
Indicates the textarea has a validation error. Applies error styling.
Initial number of visible text rows. The textarea will auto-grow with content.
Additional CSS classes to apply to the textarea.
Controlled value of the textarea.
Default uncontrolled value of the textarea.
Callback fired when the textarea value changes.
Maximum number of characters allowed.
TypeScript
type TextareaProps = React.ComponentProps<"textarea">;
Styling Features
- Auto-growing height with
field-sizing-content (adjusts to content)
- Minimum height of 4rem (min-h-16)
- Focus ring with customizable ring color
- Error state styling via
aria-invalid
- Disabled state with reduced opacity
- Selection styling with primary color
- Dark mode support
- Smooth transitions for focus states
