---
title: "Text field UI: anatomy, variants and examples | Kombai"
description: "A text field is a single-line box where people type short text, like a name, an email address or a code."
canonical_url: https://kombai.com/glossary/text-field/
author: "The Kombai Team"
---

# Text field

A text field is a single-line box where people type short text, like a name, an email address or a code.

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

- [Marlow](https://kombai.com/gallery/inspirations/text-field-ios-10/) (Mobile)
- [Cindervale](https://kombai.com/gallery/inspirations/text-field-web-24/) (Web)
- [Verso](https://kombai.com/gallery/inspirations/text-field-ios-31/) (Mobile)

## What is a text field?

A text field is a single-line box for short, free-form answers: a name, an email address, a code or an amount. A label says what goes in it, and hint or error text near the box explains the format or what to fix.

- The box shows focus with a stronger border or a ring while people type.
- Its width hints at the answer, like a short box for a ZIP code.

## When to use text field

- **Short, free-form answers.** Names, titles and promo codes that people can't pick from a list.
- **Values people know.** Email addresses and phone numbers are faster to type than to find.
- **Naming one thing.** Renaming a file, a list or a project in a dialog or inline.

## When not to use one

- **Long text.** Messages and descriptions need a text area that shows several lines.
- **A fixed set of answers.** Use radio buttons or a dropdown when the options are known.
- **Dates people browse for.** A check-in date or a meeting time suits a date or time picker.

## Anatomy

1. **Label**: Names the field, stays visible
2. **Input**: The box people type into
3. **Hint text**: Format or rules, one line
4. **Trailing icon**: Clear, reveal or status
5. **Error message**: Says what to fix
6. **States**: Default, focus, filled, error, disabled

## Variants

We sorted every text field design in the Kombai gallery and found six patterns.

### 1. Outlined fields with labels above

The default. A label sits above a bordered box, so it stays readable while people type and when they check their answers.

- [Kestrel Partner](https://kombai.com/gallery/inspirations/text-field-ios-19/) (Mobile)
- [Yewcroft](https://kombai.com/gallery/inspirations/text-field-web-49/) (Web)
- [Beckwith](https://kombai.com/gallery/inspirations/text-field-web-27/) (Web)

### 2. Filled fields

A tinted box with no border, or a faint one. Common on sign-in screens and in settings panels with many fields.

- [Loomcraft](https://kombai.com/gallery/inspirations/text-field-ios-21/) (Mobile)
- [Thornbury](https://kombai.com/gallery/inspirations/text-field-web-3/) (Web)
- [Ledger Sync](https://kombai.com/gallery/inspirations/text-field-web-51/) (Web)

### 3. Underline fields

Only a line under the text. Minimal, and best on screens with one or two fields and little else.

- [Quillside](https://kombai.com/gallery/inspirations/text-field-ios-22/) (Mobile)
- [Quorum](https://kombai.com/gallery/inspirations/text-field-ios-29/) (Mobile)
- [Tidewell](https://kombai.com/gallery/inspirations/text-field-ios-17/) (Mobile)

### 4. Floating labels

The label sits inside the box and moves to its top edge, or into a notch in the border, once the field has a value.

- [Torrey](https://kombai.com/gallery/inspirations/text-field-ios-20/) (Mobile)
- [Solvi](https://kombai.com/gallery/inspirations/text-field-ios-5/) (Mobile)
- [Quarrow](https://kombai.com/gallery/inspirations/text-field-web-17/) (Web)

### 5. Prefixes, suffixes and inline buttons

A country code, a currency sign or a Paste button attached to the field, so people type only the part that changes.

- [Veranda](https://kombai.com/gallery/inspirations/text-field-ios-6/) (Mobile)
- [Ferry](https://kombai.com/gallery/inspirations/text-field-ios-25/) (Mobile)
- [Skyline Air](https://kombai.com/gallery/inspirations/text-field-ios-1/) (Mobile)

### 6. One-time code inputs

Six boxes for six digits, or one wide field with spaced digits, for codes sent by email or text.

- [Wayfare Stays](https://kombai.com/gallery/inspirations/text-field-ios-11/) (Mobile)
- [Alder Health](https://kombai.com/gallery/inspirations/text-field-ios-27/) (Mobile)
- [Meridiel](https://kombai.com/gallery/inspirations/text-field-web-13/) (Web)

## Where text fields show up

### Sign-up and sign-in

Email, phone and password fields, often the only fields on the screen.

- [Warble](https://kombai.com/gallery/inspirations/text-field-ios-34/) (Mobile)
- [Ellerby](https://kombai.com/gallery/inspirations/text-field-web-36/) (Web)
- [Larkmead](https://kombai.com/gallery/inspirations/text-field-web-29/) (Web)

### Addresses and contact details

Street, city and ZIP code at checkout, and name, email and phone when adding a contact.

- [Nella](https://kombai.com/gallery/inspirations/text-field-ios-15/) (Mobile)
- [Peatwick](https://kombai.com/gallery/inspirations/text-field-web-26/) (Web)
- [Hestermere](https://kombai.com/gallery/inspirations/text-field-web-32/) (Web)

### Naming things

One field in a small dialog or sheet to name a wishlist, a collection or a saved query.

- [Driftwell](https://kombai.com/gallery/inspirations/text-field-web-4/) (Web)
- [Fernway](https://kombai.com/gallery/inspirations/text-field-ios-33/) (Mobile)
- [Marrowden](https://kombai.com/gallery/inspirations/text-field-web-40/) (Web)

### Settings and records

Profile details, workspace names and CRM records, edited in place and saved together.

- [Wexbury](https://kombai.com/gallery/inspirations/text-field-web-48/) (Web)
- [Pinecrest](https://kombai.com/gallery/inspirations/text-field-web-16/) (Web)
- [Cragmoor](https://kombai.com/gallery/inspirations/text-field-web-41/) (Web)

## Text field vs similar components

| | [Text field](https://kombai.com/glossary/text-field/) | [Text area](https://kombai.com/glossary/text-area/) | [Search bar](https://kombai.com/glossary/search-bar/) | [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) |
|---|---|---|---|---|
| Takes | One line of typed text | Several lines of text | A query to find content | A choice from a list |
| Size | One line, sized to the answer | Several lines, grows or scrolls | One line, often full width | A button that opens a list |
| Best for | Names, emails, codes, amounts | Messages, bios, descriptions | Finding items in a list or site | Picking one known option |

## Build notes

- Pair every <input> with a visible <label>, linked by for and id.
- Don't use placeholder text as the label. It disappears once people type.
- Set type and autocomplete, like type="email" with autocomplete="email", so browsers can fill it.
- Use inputmode="numeric" for codes and whole numbers instead of type="number".
- Link hint and error text with aria-describedby, and set aria-invalid="true" only after a failed check.
- Size the field to the answer, and never block paste.

## FAQ

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

A text field takes one line, like a name or an email address. A text area shows several lines and fits messages, bios and descriptions. Size the box to the answer you expect, so people can tell how much to write.

### Should the label go above the field or inside it?

Above is the safest choice: the label stays visible while people type and when they review the form. Placeholder text inside the box is not a label, because it disappears as soon as people start typing. Floating labels keep the label visible by moving it to the top edge of the box.

### Should number fields use type="number"?

Usually not. For whole numbers and codes, like a ZIP code or a one-time code, use a text input with inputmode="numeric". Phones still show the numeric keypad.

### When should a text field show an error?

After people leave the field or submit the form, not while they're still typing. Don't flag an empty required field until someone tries to submit. Say what to fix, like "Enter an email address like name@company.com", and keep what they typed so they can correct it.

## Related terms

- [Text area](https://kombai.com/glossary/text-area/)
- [Form](https://kombai.com/glossary/form/)
- [Search bar](https://kombai.com/glossary/search-bar/)
- [Date picker](https://kombai.com/glossary/date-picker/)

## References

- [GOV.UK Design System: Text input](https://design-system.service.gov.uk/components/text-input/)
- [MDN: The text input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/text)
- [MDN: The autocomplete attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete)