Textarea

Examples

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.

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.

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

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

<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.

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

API

Textarea

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, and 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, since it defeats the content sizing
• Don't use ghost in standard forms, since it lacks the visual boundary users expect