---
title: "Text area UI: anatomy, variants and examples | Kombai"
description: "A text area is a multi-line box for answers longer than a line, like a message, a review or a description."
canonical_url: https://kombai.com/glossary/text-area/
author: "The Kombai Team"
---

# Text area

A text area is a multi-line box for answers longer than a line, like a message, a review or a description.

- Also called: textarea, multiline input
- Platforms: Web, Mobile
- In the Kombai gallery: [55 web designs](https://kombai.com/gallery/web/text-area/), [35 mobile designs](https://kombai.com/gallery/mobile/text-area/)

- [Belvara](https://kombai.com/gallery/inspirations/text-area-ios-3/) (Mobile)
- [Foxglove](https://kombai.com/gallery/inspirations/text-area-web-26/) (Web)
- [Thistle](https://kombai.com/gallery/inspirations/text-area-ios-31/) (Mobile)

## What is a text area?

A text area is a multi-line box for answers that run longer than a line: a message, a review, a bio or a set of instructions. It shows several lines at once and wraps text as people type, so they can read back what they wrote.

- Its height hints at how much to write.
- Many show a character count, a resize handle or both in a corner.

## When to use text area

- **Answers longer than a line.** Messages, reviews, bios and project details.
- **Open questions.** A "tell us more" box after a rating or a reason list.
- **Instructions and prompts.** Briefs for an AI tool or notes for a courier.

## When not to use one

- **Short answers.** Names, emails and codes fit a single-line text field.
- **Formatted writing.** Headings, links and lists need a rich text editor.
- **Answers you could list.** If most people give one of a few answers, offer them as options.

## Anatomy

1. **Label**: Names the box
2. **Hint text**: What to include
3. **Input area**: Several visible lines
4. **Character count**: Characters left, or over
5. **Resize handle**: Drag to make it taller
6. **States**: Empty, focus, filled, over limit, disabled

## Variants

We sorted every text area design in the Kombai gallery and found four patterns.

### 1. Description boxes in forms

The default. A labeled box under a name or title field, for a description people can keep short or skip.

- [Kestrel](https://kombai.com/gallery/inspirations/text-area-web-4/) (Web)
- [Argot](https://kombai.com/gallery/inspirations/text-area-web-54/) (Web)
- [Windrow](https://kombai.com/gallery/inspirations/text-area-web-30/) (Web)

### 2. Boxes with a character count

A counter under or inside the box, counting up to a limit or down to zero, for posts and notes with a cap.

- [Juniper](https://kombai.com/gallery/inspirations/text-area-ios-24/) (Mobile)
- [Roundtable](https://kombai.com/gallery/inspirations/text-area-ios-17/) (Mobile)
- [Fernbrook](https://kombai.com/gallery/inspirations/text-area-ios-8/) (Mobile)

### 3. Prompt boxes

A large rounded box with a send button, attachments and model or style options inside it, as the main input of an AI tool.

- [Verity](https://kombai.com/gallery/inspirations/text-area-ios-10/) (Mobile)
- [Lumo](https://kombai.com/gallery/inspirations/text-area-web-9/) (Web)
- [Bramble](https://kombai.com/gallery/inspirations/text-area-web-35/) (Web)

### 4. Full-screen composers

No visible box at all. The writing space fills the screen above the keyboard, for journal entries, posts and notes.

- [Nocturne](https://kombai.com/gallery/inspirations/text-area-ios-14/) (Mobile)
- [Larkspur](https://kombai.com/gallery/inspirations/text-area-ios-4/) (Mobile)
- [Amberleaf](https://kombai.com/gallery/inspirations/text-area-ios-28/) (Mobile)

## Where text areas show up

### Feedback and reviews

An optional box after a rating or a reason list, asking people to say more in their own words.

- [Marigold](https://kombai.com/gallery/inspirations/text-area-ios-6/) (Mobile)
- [Hearthway](https://kombai.com/gallery/inspirations/text-area-web-42/) (Web)
- [Sablewood](https://kombai.com/gallery/inspirations/text-area-ios-30/) (Mobile)

### Bios and listing descriptions

Profile bios and product descriptions that show up publicly, often with tips or a limit beside them.

- [Thornbury](https://kombai.com/gallery/inspirations/text-area-web-55/) (Web)
- [Tidewater](https://kombai.com/gallery/inspirations/text-area-ios-18/) (Mobile)
- [Plinth](https://kombai.com/gallery/inspirations/text-area-web-22/) (Web)

### Instructions for AI tools

System prompts, personal context and saved background that an assistant reads before every reply.

- [Corvine AI](https://kombai.com/gallery/inspirations/text-area-web-13/) (Web)
- [Stellwood](https://kombai.com/gallery/inspirations/text-area-web-43/) (Web)
- [Larkspur](https://kombai.com/gallery/inspirations/text-area-web-23/) (Web)

## Text area vs similar components

| | [Text area](https://kombai.com/glossary/text-area/) | [Text field](https://kombai.com/glossary/text-field/) | [Search bar](https://kombai.com/glossary/search-bar/) |
|---|---|---|---|
| Lines | Several, wrapping as people type | One | One |
| Sized by | How much people will write | The length of the answer | The width of the page |
| Best for | Messages, reviews, prompts | Names, emails, codes | Finding items or pages |

## Build notes

- Use a <textarea> with a visible <label> above it, linked by for and id.
- Placeholder text can show an example, but it's not a label.
- Set rows so the height fits the answer you expect. Browser defaults differ.
- Grow the box with field-sizing: content and cap it with max-height, or keep the resize handle.
- Let people type past a character limit, and say how far over they are so they can trim.
- Announce the remaining count to screen readers when typing pauses, not on every key.

## FAQ

### What's the difference between a text area and a text field?

A text field takes one line, like a name or an email address. A text area takes answers that can run longer than a line, like a message or a review, and shows several lines at once.

### How tall should a text area be?

Tall enough to show the answer you expect without scrolling. A short note might need three lines and a project description many more. Set the height with the rows attribute, since browser defaults differ.

### Should a text area have a character limit?

Only when there's a real reason, like a card that prints a fixed number of characters. Show a count near the box, let people type past the limit and tell them how many characters to remove. That way people can paste a full answer and trim it.

### Should a text area grow as people type?

Growing keeps the whole answer in view, which helps people reread it. The CSS field-sizing: content property does this in current browsers. Cap the height so a long answer scrolls inside the box instead of pushing the page.

## Related terms

- [Text field](https://kombai.com/glossary/text-field/)
- [Form](https://kombai.com/glossary/form/)
- [Search bar](https://kombai.com/glossary/search-bar/)
- [Dialog](https://kombai.com/glossary/dialog/)

## References

- [GOV.UK Design System: Textarea](https://design-system.service.gov.uk/components/textarea/)
- [GOV.UK Design System: Character count](https://design-system.service.gov.uk/components/character-count/)
- [MDN: The textarea element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea)
- [MDN: field-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/field-sizing)