Skip to main content
Frontend Glossary

UI components · Form input

Textarea

Also called: Text area, Multi-line text field, Multiline input, TextArea

An input for multiple lines of text where Enter adds a new line. Good for longer content like notes, comments, and problem descriptions.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Use a textarea for "Describe the problem." Make it 4 lines tall by default and grow with the content, with a scrollbar after 10 lines. Placeholder text: "Describe the problem in at least 10 characters." Show a character count "0/500" in the bottom-right corner, block input past 500 characters, and don't let users resize it by dragging.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Textarea is what you need.

Use Textarea when

  • Content that might be several sentences, like notes, comments, feedback, or problem descriptions
  • Plain text where line breaks matter, like a shipping address or a bio
  • The message box in a chat or AI conversation, where the length varies

Pick something else when

  • Short content that fits on one line, like a name, phone number, or title. Use a single-line input.

    Use insteadInput

  • Content that needs bold, images, or headings. Use a rich text editor.

  • Numbers-only content

    Use insteadInput Number

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Only one or two lines tall, so users writing long content have to scroll back and forth in a tiny box

  2. 02

    Having a character limit but no counter, then throwing a "too long" error on submit

  3. 03

    Using a textarea to collect structured data like tags or email lists, and making users separate them with commas

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A multi-line input area with placeholder text, often with a character count in the bottom-right. Can be set to resize by dragging or grow automatically.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A textarea is an Input that allows line breaks. In HTML it's <textarea>. By default it shows 3 to 5 lines. Longer content gets a scrollbar, or you can make it grow with the content. The bottom-right corner often shows a character count like "32/200" to help users stay within the limit.

The difference from a single-line input is length and line breaks: use an input for names and titles, and a textarea for notes, reviews, problem descriptions, and bios. If users also need bold, images, or formatting, that's beyond a textarea, so use a rich text editor. In chat or AI conversation inputs, a textarea is usually set up so Enter sends and Shift+Enter adds a new line.

Developer info
Term ID
component-textarea
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • textarea
  • textarea.ant-input
  • .el-textarea
  • [class*="MuiInputBase-multiline"]
  • .arco-textarea
  • .arco-textarea-wrapper
  • .t-textarea
  • .n-input--textarea
  • [data-slot="textarea"]
  • textarea.form-control
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026