Textarea

Give longer text room to breathe.

Preview

Agent instructions

Design guidance

Use Textarea for instructions, feedback, and longer form answers. Use Composer for a chat message with attachments or sending controls. Give the field a visible label. Keep instructions and validation in Field or the application.

Four rows set the default initial and minimum height. Set rows for shorter or longer tasks. An explicit style.minHeight can override the minimum. The native corner grip resizes vertically. Its border mark doubles along both edges on hover and extends across the bottom during a drag; the right mark keeps its hover length. Motion follows the system’s reduced-motion preference. Set style={{ resize: "none" }} for a fixed field. The control fills its container; use the container width, native cols, or style to choose line length.

Installation

Install

npx shadcn@latest add https://ghost-ui.com/r/textarea.json

Install Field when using the labeled and validated examples below. Textarea itself remains a native control.

Basic usage

1234567import { Field } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

<Field.Root>
  <Field.Label htmlFor="instructions">Agent instructions</Field.Label>
  <Textarea id="instructions" placeholder="Describe how the assistant should respond." />
</Field.Root>

Structures

Textarea renders one native textarea. Use Field.Control render={<Textarea />} when the field needs Field registration and validation. Native attributes, events, and the ref reach that same element.

Examples

Outline

Use the default outline when the field needs a clear boundary.

Agent instructions

Ghost

Blend editable text into the page without inner padding. The text aligns with its label. The surface and boundary stay transparent; hover and focus clarify only the text and placeholder.

Agent instructions

Short feedback

Set rows={2} for a brief answer.

Response feedback

Long content

Set rows={8} for a research brief. The value stays caller-owned.

Research brief

Fixed size

Use native style={{ resize: "none" }} when the surrounding layout must keep its height.

Response format

Invalid

Associate the field with a useful error message. required still uses native validation.

Review reason

Add a reason before requesting a review.

Read only

Keep a policy selectable and readable while preventing edits.

Workspace policy

Do not include personal data in shared summaries.

Disabled

Show an unavailable field with its current content.

Archived instructions

API reference

Textarea properties
Prop	Type	Default	Description
`variant`	`"outline" \| "ghost"`	`"outline"`	Chooses the visible boundary.
`rows`	`number`	`4`	Native initial row count and minimum height. Explicit rows override the default.
`cols`	`number`		Native character width. The default CSS fills the container; set width:auto to use cols sizing.
`style`	`React.CSSProperties`		Native width, height, min/max height, and resize configuration.
`value / defaultValue`	`string`		Controlled value or initial uncontrolled content.
`aria-invalid`	`boolean \| "true" \| "false"`		Reports an invalid value; pair it with an associated message.
`readOnly / disabled`	`boolean`	`false`	Native editing and availability states.
`ref`	`React.Ref<HTMLTextAreaElement>`		Points to the native textarea.