Skip to main content
Frontend Glossary

UI components · Form input

Form

Also called: Form layout, Input form, Form fields, Form Item

Groups input controls, field labels, validation messages, and a submit button together to collect and submit the information users fill in.

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

How to tell AI

Swap in your own content first

Build a "New contact" form with labels above the controls: Name, Phone number (required), Email, Group (a select), and Notes (a textarea). Put an asterisk before required fields, validate on blur, and show errors below the control. At the bottom, right-align "Cancel" and "Save," and show a loading state on the button while saving.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Form is what you need.

Use Form when

  • Creating or editing a record, like adding a contact or editing product details
  • Flows where users fill in and submit information, like sign-up, checkout, or sending feedback
  • Settings where users change several things and then click Save once

Pick something else when

  • Just showing a record's details when users don't need to edit them

    Use insteadDescription List

  • Dozens of fields split into clear stages. Break it into a wizard.

    Use insteadWizard

  • Changing just one or two fields in place. Inline edit is lighter.

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

    Building a read-only detail page as rows of disabled inputs, gray on gray and hard to read, and it looks editable

  2. 02

    Every field spanning the whole row, so even short ones like phone number or ZIP code get stretched

  3. 03

    Reporting every error at once only after submit, without scrolling to the first error

03Spot it

How to spot it

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

Structure

Several form items (label, input control, help or error text) plus action buttons at the bottom. With many fields, group them by topic.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A form is a container for a set of input controls. Each row is a form item made of a field label, an input control (input, select, checkbox, and so on), help text, and an error message, with "Submit" and "Cancel" buttons at the bottom. Labels can sit above the controls, which suits phones and long forms, or be aligned on the left, which suits admin panels. Required fields usually have a red asterisk before the label.

What makes a good form: related fields grouped under small headings, control widths that match the content length, errors shown on blur instead of a pile of errors after submit, and a loading state on the button while submitting. If there are lots of fields, consider splitting it into a Wizard.

Forms are only for "filling in." If you're just showing a record's details, like an order detail page, use a plain-text layout like a Description List, not rows of disabled inputs.

Developer info
Term ID
component-form
DOM selectors

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

  • form
  • [role="form"]
  • .ant-form
  • .el-form
  • .arco-form
  • .t-form
  • .n-form
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026