Coming soon
The form submission pattern applies to: user registration/login, address entry, order placement, information updates, and any other scenario that collects user input.
- Form Title — Describes the form's purpose
- Input Field Group — Each field includes: Label (floating), Input, Supporting text (hint / error)
- Submit Button — Primary action, typically a Primary type button
- Cancel / Back (optional) — Secondary action
| Timing | Behavior |
|---|
| While typing | Real-time format validation (e.g. phone number format) |
| On blur | Required field validation |
| On submit | Full field validation; scrolls to the first error field |
Do
- Keep the number of fields minimal (required fields ≤ 5)
- Make error messages specific and actionable ("Invalid phone number format" not "Invalid input")
- Show a loading indicator during submission to prevent duplicate submissions
Don't
- Don't show error messages before the user has typed anything
- Don't place the required indicator (*) after the field label instead of before
- Don't make the submit button completely unclickable when the form is empty — allow a click to trigger validation
This page is a work in progress and will include an interactive Demo and full design specifications.
