Textarea

A textarea that can grow to fit what is typed. rows sets where it starts, maxRows where it stops.

Installation

import { Textarea } from '@geckoui/geckoui';

Basic Usage

<Textarea placeholder="Type something..." />

Props API

Examples

Auto-Resizing Textarea

<Textarea
  autoResize
  placeholder="This textarea grows as you type..."
/>

With Row Constraints

<Textarea
  rows={4}
  placeholder="Fixed at 4 rows"
/>

Auto-Resize with Max Rows

<Textarea
  autoResize
  rows={2}
  maxRows={8}
  placeholder="Grows from 2 to 8 rows, then scrolls..."
/>

Disabled State

<Textarea
  disabled
  placeholder="This textarea is disabled"
  value="Cannot edit this content"
/>

Read-Only State

<Textarea
  readOnly
  value="This is read-only content that cannot be edited."
  rows={3}
/>

Auto-Resize Behavior

When autoResize is enabled:

• It grows as you type and shrinks again when text is removed
• rows is the shortest it gets, maxRows the tallest, after which it scrolls
• It follows whatever font, size, line height and padding you give it, and refits when a web font finishes loading
• The drag handle is off, since the height is the component's — a manual resize would be undone by the next keystroke

Put the handle back if you would rather have it, and it will fight the next keystroke:

.GeckoUITextarea[data-auto-resize] {
  resize: vertical;
}

When autoResize is disabled it is a plain <textarea>: rows sets the height, nothing is written to its style, so CSS can size it and the user can drag it. maxRows is ignored.

.GeckoUITextarea {
  height: 200px;
}

Accessibility

• Fully keyboard navigable
• Works with screen readers
• Supports all ARIA textarea attributes
• Disabled state is properly communicated

Styling

The component uses the class name GeckoUITextarea. Override styles using the className prop:

.GeckoUITextarea {
  /* Your custom styles */
}

Related Components

• Input - Single-line text input
• Label - Form labels
• InputError - Error messages
• RHFTextarea - React Hook Form integration