Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/aeonzz/eo-n/llms.txt

Use this file to discover all available pages before exploring further.

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

​
Usage

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
string
Placeholder text displayed when the textarea is empty.
​
disabled
boolean
Whether the textarea is disabled.
​
aria-invalid
boolean
Indicates the textarea has a validation error. Applies error styling.
​
rows
number
Initial number of visible text rows. The textarea will auto-grow with content.
​
className
string
Additional CSS classes to apply to the textarea.
​
value
string
Controlled value of the textarea.
​
defaultValue
string
Default uncontrolled value of the textarea.
​
onChange
function
Callback fired when the textarea value changes.
​
maxLength
number
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