Skip to main content
Frontend Glossary

UI components · Form input

Input

Also called: Text field, Text input, TextField, Text box

A box for typing one short line of text, like a name, phone number, email, or title. The most common control in forms.

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

How to tell AI

Swap in your own content first

Add a "Phone number" input to the form: a label above it, gray placeholder text "Enter a 10-digit phone number" inside, type set to tel, and a max of 10 digits. When focused, the border gets darker. On blur, validate the format. If it's wrong, turn the border red and show red error text below the input.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Input is what you need.

Use Input when

  • Short text that fits on one line, like a name, phone number, email, or title
  • Username and password on login and sign-up pages
  • Short content that needs format validation, like an email, URL, or verification code

Pick something else when

  • Content that might be several sentences or need line breaks, like notes or reviews

    Use insteadTextarea

  • Numbers-only content with a range, like quantity or age

    Use insteadInput Number

  • Searching a list or the whole site by keyword. Use a search box with a magnifying glass icon.

    Use insteadSearch Box

  • When there's a fixed set of options. Use a select or radio buttons.

    Use insteadSelectRadio

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

    Using the placeholder instead of a label, so the hint disappears as soon as users start typing and they forget what the field is for

  2. 02

    Leaving phone and email fields as the default text type, so phones show the wrong keyboard

  3. 03

    Input width that doesn't match the content, like a ZIP code field spanning the whole row while the address field is narrow

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 label, a single-line input area, and placeholder text. Can have prefix or suffix icons, with help or error text below.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

An input takes a single line of text, and pressing Enter doesn't add a new line. It usually has a label that says what to fill in and gray placeholder text inside the box, and it can have icons or fixed text before or after, like "$" or ".com". Common states are default, focused (darker border), disabled, read-only, and validation error (red border with a message below).

Keep a few similar controls apart. If the content might be several sentences and need line breaks, use a Textarea. If it only takes numbers and needs a range or plus/minus buttons, use an Input Number. If it's for finding content on the page or in data, use a Search Box. Also pick the right type: email for email addresses, tel for phone numbers, password for passwords, so phones show the matching keyboard.

Developer info
Term ID
component-input
DOM selectors

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

  • input[type="text"]
  • input:not([type])
  • input[type="email"]
  • input[type="password"]
  • input[type="tel"]
  • input[type="url"]
  • input.ant-input
  • .ant-input-affix-wrapper
  • .el-input
  • [class*="MuiTextField-root"]
  • input.arco-input
  • .arco-input-wrapper
  • .t-input
  • .n-input:not(.n-input--textarea)
  • [data-slot="input"]
  • input.form-control
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026