Textarea

A multi-line text input that can grow with its content.

import { Textarea } from 'components/UI/Textarea'

Basic

Use this for text longer than one line, such as a message. Put Textarea in Field.Root, like Field.Control. The user can drag it taller.

Feedback

Drag the bottom corner to make the box taller.

Set autoExpand to grow the box as the user types, up to 320px. Then it scrolls.

Message

This box grows as you type.

Match the size of the fields and buttons beside it. sm, md, and lg set the text size and padding to match fields of the same size.

sm · dense UI

md · default

lg · hero field

Use inset by default and line for light or inline editing, with one appearance per form. Hover and focus the fields to see those states.

inset · forms

Empty

Filled

Invalid

Write at least 10 characters.

Disabled

line · inline editing

Empty

Filled

Invalid

Write at least 10 characters.

Disabled

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

autoExpand grows the box with its content up to a maximum height. Browsers without field-sizing support keep a fixed height and scroll.

Props that the library adds. Every part also takes all the Base UI props.

Prop	Type	Default	Description
size	'sm' \| 'md' \| 'lg'	'md'	Sets the text size, padding, and control height.
appearance	'inset' \| 'line'	'inset'	Sets the field shape. Use line for light or inline editing, such as renaming in place, filters, and quick settings.
autoExpand	boolean	false	Grows the box with its content, up to 320px. The user cannot resize it.
rows	number	3	The number of visible lines. An autoExpand box ignores it.