Textarea

The multi-line sibling of Input — same chrome, same field wiring, plus auto-resize.

Release notes

Markdown is supported.

<Textarealabel="Release notes"placeholder="What changed?"description="Markdown is supported."rows={4}/>

Textarea is Input with more than one line. The ring, the inset fill, the focus treatment, the sizes and the whole field layout are identical — the only additions are rows and autoResize.

Usage

tsx

import { Textarea } from "@heyo-sh/heyo-ui";<Textarea label="Release notes" rows={4} />;

Auto-resize

autoResize grows the control with its content instead of scrolling it. Use it where the text is the point — a commit message, a comment, a prompt — and leave it off where the field sits in a dense form that should not reflow as you type.

Commit message

<TextareaautoResizelabel="Commit message"defaultValue={"fix(worker): drop the retry loop\n\nIt masked a 500 from the origin."}/>

Errors and counters

The label row's right end is free — a character counter belongs there, not under the control where it would compete with the description.

Summary0 / 280

A summary is required.

<Textarealabel="Summary"labelAside={<span className="text-heyo-subtle">0 / 280</span>}error="A summary is required."/>

Properties

autoResizebooleanoptional

Grows with the content instead of scrolling. It defaults to false.

rowsnumberoptional

The initial height, in lines.

size"xs" | "sm" | "base" | "lg"optional

Padding and type size, matching the control heights. It defaults to base.

labelReactNodeoptional

Renders the full field layout — label, description, error and wiring.

descriptionReactNodeoptional

Muted helper text under the control.

errorFieldErroroptional

A message, or { message, match } tied to the browser's ValidityState.

optionalbooleanoptional

Adds the muted "Optional" marker to the label.

labelAsideReactNodeoptional

A right-aligned slot on the label row — a counter, a hint.

fieldClassNamestringoptional

Class for the outer field wrapper.

classNamestringoptional

Class for the control itself.

refRef<HTMLTextAreaElement>optional

Forwarded to the <textarea>.

Every other <textarea> attribute is passed straight through.

Loading documentation…