Text Area

A form field that allows multiple lines of free-form text.

Style

Default heights listed below and built into the component. On web, consider the width when choosing how many lines are needed.

Maximum height: 10 lines of text

Default height: 4 lines of text. However, base the height of the text area on the expected or average length of user-entered content

Minimum height: 2 lines of text. If only one line is desired, use a text field

Width: typically set to “fill” the form area

TextArea-Example-Size-1

TextArea-Example-Size-2

Resizing / scrolling

Web: by default, don’t offer resizing. Use autoresize ONLY at the maximum size and ONLY when needed, ex: longer blocks of content and when user-added content varies in length

Native app: don’t offer resize. Instead, add a scroll.

Modals: don’t offer resize. Instead, add a scroll.