---
title: "Form UI: anatomy, variants and examples | Kombai"
description: "A form groups labeled fields and a submit button, so people can hand over information in one go."
canonical_url: https://kombai.com/glossary/form/
author: "The Kombai Team"
---

# Form

A form groups labeled fields and a submit button, so people can hand over information in one go.

- Also called: form layout
- Platforms: Web, Mobile
- In the Kombai gallery: [198 web designs](https://kombai.com/gallery/web/forms/), [164 mobile designs](https://kombai.com/gallery/mobile/forms/)

- [Halyard](https://kombai.com/gallery/inspirations/forms-web-117/) (Web)
- [Talvara](https://kombai.com/gallery/inspirations/forms-ios-32/) (Mobile)
- [Stillgrove](https://kombai.com/gallery/inspirations/forms-web-44/) (Web)

## What is a form?

A form is a set of fields, like text fields, selects, checkboxes and radio buttons, that collect related answers and send them together. Each field has a label that says what to enter. People fill the fields in order, then press one button to submit. If something is missing or wrong, the form says which field and how to fix it.

- Every field has a visible label, and related fields sit together under a heading.
- One primary button submits the whole form, and errors point to the exact field.

## When to use form

- **Collecting details.** Sign-ups, addresses, payment and profile details that a system has to store.
- **Creating something.** A new contact, project, event or listing with a few fields to fill.
- **Requests and applications.** Contact sales, support requests and job applications that someone reviews.

## When not to use one

- **A single setting.** A toggle that saves on its own needs no form or Save button.
- **Searching.** Use a search bar. People expect results as they type, not a submit step.
- **Long questionnaires on one page.** Split long forms into short steps with a progress indicator.

## Anatomy

1. **Heading**: Says what the form is for
2. **Label**: Names each field
3. **Field**: Where the answer goes
4. **Hint or error**: Help, or what to fix
5. **Submit button**: Sends everything at once
6. **States**: Empty, error, sending, sent

## Variants

We sorted the form designs in the Kombai gallery into five patterns.

### 1. Sign-in and sign-up forms

An email, a password and a button, often with social sign-in above or below and inline password rules.

- [Xanbrook](https://kombai.com/gallery/inspirations/forms-web-27/) (Web)
- [Lunivo](https://kombai.com/gallery/inspirations/forms-ios-97/) (Mobile)
- [Parley](https://kombai.com/gallery/inspirations/forms-web-104/) (Web)

### 2. One question per step

Onboarding and surveys that ask one thing per screen, with a Next button and an Other option that opens a field.

- [Bellbird](https://kombai.com/gallery/inspirations/forms-web-5/) (Web)
- [Coire](https://kombai.com/gallery/inspirations/forms-ios-21/) (Mobile)
- [Bracklen](https://kombai.com/gallery/inspirations/forms-ios-15/) (Mobile)

### 3. Address and payment forms

Long runs of short fields for a street, city, postcode and card, with paired fields on one row.

- [Remontoir](https://kombai.com/gallery/inspirations/forms-ios-14/) (Mobile)
- [Umbelgrove](https://kombai.com/gallery/inspirations/forms-ios-17/) (Mobile)
- [Jarrowfield](https://kombai.com/gallery/inspirations/forms-web-45/) (Web)

### 4. Profile and settings forms

Saved details shown in editable fields, with a Save button and, on the web, sections in a side menu.

- [Verano](https://kombai.com/gallery/inspirations/forms-web-52/) (Web)
- [Gramfox](https://kombai.com/gallery/inspirations/forms-ios-82/) (Mobile)
- [Company Details](https://kombai.com/gallery/inspirations/forms-web-47/) (Web)

### 5. Forms in a dialog or sheet

Short forms that open over the page to add a team member, a staff role or a poll, with a cancel and a confirm button.

- [Sablefield](https://kombai.com/gallery/inspirations/forms-web-34/) (Web)
- [Lomridge](https://kombai.com/gallery/inspirations/forms-web-31/) (Web)
- [Rimevane](https://kombai.com/gallery/inspirations/forms-ios-1/) (Mobile)

## Where forms show up

### Checkout and booking

Contact, delivery and payment details collected step by step, next to an order or booking summary.

- [Ottery](https://kombai.com/gallery/inspirations/forms-web-15/) (Web)
- [Dunmere](https://kombai.com/gallery/inspirations/forms-web-2/) (Web)
- [Gustero](https://kombai.com/gallery/inspirations/forms-ios-83/) (Mobile)

### Onboarding

A workspace name, team size and a few preferences asked right after sign-up, so the app starts set up.

- [Meridia](https://kombai.com/gallery/inspirations/forms-web-186/) (Web)
- [Curveport](https://kombai.com/gallery/inspirations/forms-web-30/) (Web)
- [Nyvale Club](https://kombai.com/gallery/inspirations/forms-ios-143/) (Mobile)

### Identity and business details

Legal names, dates of birth and company details that must match an ID or a register, with notes on why they are needed.

- [Perigee](https://kombai.com/gallery/inspirations/forms-web-170/) (Web)
- [Emberline](https://kombai.com/gallery/inspirations/forms-ios-41/) (Mobile)
- [Ridgeport](https://kombai.com/gallery/inspirations/forms-ios-100/) (Mobile)

## Form vs similar components

| | [Form](https://kombai.com/glossary/form/) | [Text field](https://kombai.com/glossary/text-field/) | [Newsletter signup](https://kombai.com/glossary/newsletter-signup/) | [Dialog](https://kombai.com/glossary/dialog/) |
|---|---|---|---|---|
| Is | A group of fields sent together | One input | A one-field form for an email | A window over the page |
| Submits | With one button | As part of a form | With one button | Whatever it holds |
| Best for | Sign-ups, checkout and requests | A single short answer | Growing a mailing list | Short tasks without leaving the page |

## Build notes

- Wrap the fields in a <form> and use a <button type="submit">, so Enter submits from any field.
- Give every field a visible <label> tied to it with for and id. A placeholder is not a label.
- Use the right type and autocomplete values, like type="email" and autocomplete="email", so browsers can fill them.
- Check fields when people leave them or submit, not on every keystroke, and move focus to the first field with an error.
- Tie hints and errors to their field with aria-describedby, and set aria-invalid on fields that need fixing.
- Disable the submit button only while sending, and say clearly when the form went through.

## FAQ

### Should a form mark required or optional fields?

Mark whichever is rarer. When most fields are required, add "optional" to the few that are not. When most are optional, mark the required ones. Either way, say it in words; an asterisk alone needs a legend.

### When should a form show errors?

When people leave a field or press submit. Errors that appear while someone is still typing are noise. Once an error shows, clear it as soon as the value is fixed, and keep the error text next to the field it is about.

### One long page or several steps?

Keep short forms on one page. Split long ones, like insurance quotes or onboarding, into steps of related questions, show progress, and let people go back without losing what they typed.

### Should the submit button be disabled until the form is valid?

Usually not. A disabled button does not say what is missing, and some people cannot tell it is disabled. Keep it enabled and show the errors when it is pressed.

## Related terms

- [Text field](https://kombai.com/glossary/text-field/)
- [Select](https://kombai.com/glossary/select/)
- [Checkbox](https://kombai.com/glossary/checkbox/)
- [Radio button](https://kombai.com/glossary/radio-button/)

## References

- [WCAG 2.2: Understanding error identification](https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html)
- [WCAG 2.2: Understanding labels or instructions](https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html)
- [MDN: The form element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)