Textarea

Overview

Textarea is a multi-line text field for longer free-form input such as comments, descriptions, or messages. It wraps a native <textarea>, so it accepts all standard textarea attributes and forwards a ref to the underlying element.

For single-line input use an Input; pair the textarea with a Label via a shared id/htmlFor, or use it inside a Form field for validation and accessible wiring.

Usage

Import the component:

import { Textarea } from "@eqtylab/equality";

Basic usage:

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

Controlled, driving the value yourself:

const [value, setValue] = useState("");

<Textarea value={value} onChange={(e) => setValue(e.target.value)} />;

Variants

Default

Disabled

Custom Height

The textarea’s height can be set with className (or the native rows attribute) for longer content.

Usage

<Textarea placeholder="Enter your message here..." />
<Textarea placeholder="Disabled textarea" disabled />
<Textarea placeholder="Longer content..." className="h-42" />
<Textarea placeholder="By rows" rows={5} />

Props

Textarea accepts all standard <textarea> attributes (placeholder, value, defaultValue, onChange, rows, maxLength, disabled, etc.) plus className. It does not add any props of its own.