Textarea

A multi-line text field — Input's sibling in every respect but the element itself, with resizing restricted to the vertical axis.

Source Storybook Accessibility

Feedback

Usage#

import { Textarea } from "neelam-ui";
 
<label className="flex flex-col gap-1.5">
  Feedback
  <Textarea placeholder="Tell us what you think…" />
</label>

Resizing#

The browser's default handle resizes on both axes. This one is resize-y: horizontal resizing routinely breaks a form's column layout in a way vertical resizing does not. Once the field is disabled, resizing is off entirely — there is nothing to type, so there is nothing to make room for.

rows defaults to 3 rather than the native 2, which reads as cramped for a field meant to hold more than a single line. Override it like any other attribute:

<Textarea rows={8} />

Invalid state#

As with Input, the error styling keys off aria-invalid directly rather than a separate prop, so the visual state and the announced state cannot drift apart:

<Textarea aria-invalid aria-describedby="bio-error" />
<p id="bio-error">Keep this under 200 characters.</p>

Keyboard#

Keyboard shortcuts
Key	Behaviour
`Tab`	Moves focus to the field, and out of it again — Tab does not insert a tab character.
`Enter`	Inserts a newline. It does not submit the surrounding form.

Enter behaves differently here

In a single-line Input, Enter submits the form. In a Textarea it inserts a newline. If you need submit-on-Enter — a chat composer, say — see Composer, which handles that pairing already.

Accessibility#

Renders a native <textarea>; text editing, scrolling, and form participation come from the platform.
Invalid styling is driven by aria-invalid, the same signal assistive tech reads.
Focus-visible uses a layered box-shadow rather than outline, so the ring survives inside scrolling containers.
No character counter is bundled. If you add one, point at it with aria-describedby and mark live updates politely, so the count is available without interrupting typing.

API reference#

Textarea adds no props of its own — TextareaProps is exactly React's TextareaHTMLAttributes<HTMLTextAreaElement>. Every native <textarea> attribute passes straight through to the element: rows, maxLength, readOnly, required, disabled, name, aria-*, and the rest.

The only defaulted one is rows, which is 3 instead of the native 2.