Textarea

Text that runs over several lines: a native <textarea> in a box that looks like a Text Input. It can stay at a fixed height, grow as people type, and let them resize it. Specification: docs/components/textarea.md.

The textareas on this page stand alone, so each is named with aria-label. With a visible label, a textarea is part of a Field.

Size

data-size on the box or any container. One row is exactly as tall as a text input of the same size; the text sits where a text input's does.

sm

md

lg

Without data-size

Height

rows is the height to start from. Without data-max-lines the textarea stays at that height and scrolls. With it, the textarea grows as people type, up to that many lines ("none": no limit), then scrolls. Type into each one to see it.

Resize

data-resize="vertical" lets people drag the corner to make it taller; "none" doesn't. Without it, the theme decides (this one: no handle). Once someone drags it, their height wins over growing.

States

Text Input's states. Error is aria-invalid="true" on the textarea; warning and success are data-intent on the box (in a Field, its message sets them). Disabled and read-only are native.

Text over
two lines

Native attributes

The browser's own attributes cover the rest: maxlength for a limit, wrap="off" for lines that don't wrap, spellcheck="false", autocapitalize and enterkeyhint.

Edge cases

Right-to-left

Long words and a scrolling textarea in a narrow box

A word longer than the box breaks rather than widening it; past its height, the textarea scrolls inside the frame.