You are reading the v1 docs. v2 renamed several props and replaced GeckoUIPortal with GeckoUIProvider. Read this page in v2.

Live examples are only rendered in the v2 docs.

Textarea

A textarea component built on react-textarea-autosize that can automatically adjust its height based on content. Control the minimum and maximum number of rows displayed.

Installation

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

Basic Usage

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

Props API

Prop	Type	Default	Description
`autoResize`	`boolean`	`false`	Enable automatic height adjustment based on content
`rows`	`number`	`2`	Minimum number of rows to display
`maxRows`	`number`	-	Maximum number of rows (only works with `autoResize`)
`className`	`string`	-	CSS class for styling
`disabled`	`boolean`	`false`	Disable the textarea
`readOnly`	`boolean`	`false`	Make the textarea read-only
...rest	`TextareaHTMLAttributes`	-	All standard HTML textarea attributes

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:

The textarea grows automatically as content increases
Minimum height is determined by the rows prop
Maximum height is determined by the maxRows prop
Shrinks back down when content is removed

When autoResize is disabled:

The textarea has a fixed height
Users can resize manually (unless CSS prevents it)
The maxRows prop is ignored

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 */
}

Dependencies

This component uses react-textarea-autosize for the auto-resize functionality.

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

Textarea

On this page