Skip to main content
Use Textarea for notes, descriptions, and other multiline values. It integrates with Field for labels and validation.

Basic textarea

Native textarea attributes such as rows, maxLength, required, and readOnly are available. size accepts sm or md and defaults to md.

Controlled value and automatic resizing

autoResize adjusts the textarea’s height as its content changes. Use maxRows to cap the height. onValueChange receives the next string and event details; native onChange is also available. Keep keyboard focus on the textarea while the user types and use helper text for limits.

Props

The reference is generated from the public component types. Native attributes, including accessible names and event handlers, are also accepted on parts that render elements.
boolean
default:"false"
Grows the textarea with its content instead of showing a scrollbar.
string | ((state: InputState) => string | undefined)
CSS class applied to the textarea, or a function that returns a class based on the input state.
number
Maximum number of rows the textarea grows to when autoResize is set. Longer content scrolls.
((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)
Called with the new value when the textarea value changes.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
default:"<textarea />"
Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.
"sm" | "md"
default:"md"
Visual size of the textarea.