Textarea

A multi-line plain text editor. Extends the native textarea element with consistent Aether UI styling and token-driven appearance.

✓Minimum height of 80px, resizable by default
✓Consistent focus ring and placeholder styling
✓Disabled state with visual feedback
✓Forwards ref
✓Full width by default

Message

import { Textarea }from "@aetherstack/ui"

textarea.tsx

import { Textarea, Label } from "@/components/ui"

export function TextareaDemo() {
  return (
    <div className="space-y-2">
      <Label htmlFor="message">Message</Label>
      <Textarea id="message" placeholder="Write your message here…" />
    </div>
  )
}

Usage

With label

Always pair a Textarea with a Label for accessibility.

Notes

Disabled

Disabled textareas prevent editing.

Bio

Fixed height (no resize)

Use resize-none to prevent manual resizing.

Comment

With character count

Compose with state to show a character count.

Bio

0 / 160

With submit button

Props

Prop	Type	Default	Description
rows	number	—	Sets the visible number of text lines. The textarea can still be resized by the user unless resize-none is applied.
placeholder	string	—	Placeholder text shown when empty.
disabled	boolean	false	Prevents editing and applies reduced opacity.
className	string	—	Additional class names.
...props	React.TextareaHTMLAttributes<HTMLTextAreaElement>	—	All standard HTML textarea attributes (onChange, value, defaultValue, maxLength, etc.).

* Required props

Accessibility

→Always associate with a Label via matching id/htmlFor.
→Use aria-describedby to connect error messages to the textarea.
→Add aria-invalid='true' when the field fails validation.