Text Area

A multi-line text field for longer-form input — the resizable counterpart to Input, with the same label / help-text / state API and form association.

Install

Examples

Default

Filled

Negative

Positive

Disabled

Taller (rows=6)

rows sets the initial height.

No resize

resize="none" removes the drag handle (also both / horizontal).

No label

show-label="false" hides the visible label — provide an accessible name another way.

Guidelines

Usage

messages, comments, and descriptions — any free-text input that may span multiple lines. For single-line entry, use an Input.

Do

  • Size rows to the expected length of input.
  • Use maxlength and show a count when there’s a limit.
  • Explain errors in help-text with state="negative".

Don’t

  • Don’t use a text area for single-line input — use an Input.
  • Don’t disable resize without a good reason; users may need more room.
  • Don’t hide the label without giving the field an accessible name.

Accessibility

Properties

Related