Textarea

Textareas capture multiline, free-form text such as messages, notes, and prompts.

Examples

Standard

Sizes

Autogrow

Disabled

Invalid

With label

Notes

Prompt bar

Overview

The Textarea component is a styled native <textarea> that shares the Input's sizes, focus states, and validation styling. Use it whenever content spans more than one line.

tsx

import { Textarea } from "@rogo-technologies/ui/textarea";

<Textarea placeholder="Your message" />;

Usage

Autogrow

Set autoGrow to let the field grow with its content instead of scrolling. Growth is driven by CSS field-sizing: content and animated through a measured height, so it works and transitions smoothly in every browser. Autogrow disables manual resizing.

tsx

<Textarea autoGrow placeholder="Write something long..." />

Cap the growth with a max-h-* class and restore scrolling past the cap:

tsx

<Textarea autoGrow className="max-h-40 overflow-y-auto" />

In input groups

InputGroupTextarea drops a Textarea into an InputGroup, the same way InputGroupInput does for single-line fields. The group owns the border and focus ring; combine it with block-aligned addons for prompt-bar layouts like the example above.

tsx

<InputGroup size="lg">
  <InputGroupTextarea autoGrow rows={1} placeholder="Ask anything..." />
  <InputGroupAddon align="block-end">{/* controls */}</InputGroupAddon>
</InputGroup>

API

Textarea

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Visual size: text scale, padding, and minimum height.
`autoGrow`	`boolean`	`false`	Grows with content (animated). Disables manual resize.
`ghost`	`boolean`	`false`	Minimal style with no border or background. For inline editing.
`noBorders`	`boolean`	`false`	Removes border but keeps background and focus ring.
`className`	`string`	—	Additional CSS classes.

Additionally, the Textarea accepts all standard HTML <textarea> attributes (placeholder, rows, value, onChange, disabled, aria-invalid, etc.).

InputGroupTextarea

Renders a Textarea configured to blend into an InputGroup (no border, transparent background, no focus ring of its own) and marks itself as the group's control so the group reacts to focus, invalid, and disabled state. Accepts all Textarea props except size, ghost, and noBorders, which the group controls.

Guidelines

Do

Use a Textarea whenever input can span multiple lines — messages, descriptions, prompts
Use autoGrow for chat and prompt fields so the field tracks its content
Cap autogrow fields with max-h-* and overflow-y-auto so long content scrolls
Pair textareas with labels for accessibility — use type-small text-tertiary for label styling

Don't

Don't use a Textarea for single-line values — use an Input instead
Don't set a fixed height on an autoGrow field — it defeats the content sizing
Don't use ghost in standard forms — it lacks the visual boundary users expect

PreviousTabs

NextToast