Forms are where users give the product data. Every unnecessary obstacle between the user and a completed form is a failure. The design goal is to make correct input easy and incorrect input obvious — before the user submits.
\nEach layer serves a distinct purpose. Do not collapse them.
\nExplains what to enter. Appears below the input, always visible, in small secondary text.
\nEmail address\n[ ]\nUse the email you signed up with.\nShows the format or an example value. Appears inside the input, disappears on typing.
\n[jane@example.com ]\n+358 40 123 4567 not Enter phone number--color-text-secondary) and lighter than actual input textConfirms whether the input is correct. The most important layer.
\nEmail address\n[jane@ ] ← invalid\n✗ Enter a valid email address.\nValidation timing:
\nReal-time validation must be forgiving at the start — do not show an error the instant the user starts typing. Show it after a short debounce (300–500ms) or after the first character that makes the input definitively wrong.
\nThe submit button enables when the form is valid. This is one of the clearest affordance signals in form design — the user sees the goal and knows when they have reached it.
\n[Submit] ← disabled, low contrast, cursor: not-allowed\n (fields incomplete or invalid)\n\n[Submit] ← enabled, full colour, cursor: pointer\n (all required fields valid)\nImplementation:
\n<button type=\"submit\" disabled={!isFormValid}>Submit</button>\nFor long or complex forms where real-time validation is not practical, do not disable the submit — validate on submit and scroll to errors instead. Disabled submit on a long form frustrates users who cannot tell what is missing.
\nLoading state on submit: Replace label with spinner, disable the button. Prevent double-submission.
\n[Label] [Optional badge if optional]\n[Input field ]\n[Helper text — what to enter, format, constraints ]\n[Error message — appears below helper text on validation fail ]\n<div class=\"field\">\n <label for=\"vat\">VAT number <span class=\"optional\">Optional</span></label>\n <input\n id=\"vat\"\n type=\"text\"\n placeholder=\"FI12345678\"\n aria-describedby=\"vat-helper vat-error\"\n aria-invalid=\"true\"\n >\n <p id=\"vat-helper\" class=\"helper-text\">Finnish VAT numbers start with FI followed by 8 digits.</p>\n <p id=\"vat-error\" class=\"error-text\" role=\"alert\">Enter a valid Finnish VAT number (e.g. FI12345678).</p>\n</div>\nMark the minority. If most fields are required, mark the optional ones. If most are optional, mark the required ones.
\n<label>Email <abbr title=\"Required\">*</abbr></label>\n<!-- or -->\n<label>Phone <span class=\"badge\">Optional</span></label>\nRelated fields belong in a <fieldset> with a <legend>. This is semantic HTML and helps screen readers announce the group context.
<fieldset>\n <legend>Billing address</legend>\n <label>Street</label><input type=\"text\">\n <label>City</label><input type=\"text\">\n <label>Postal code</label><input type=\"text\">\n</fieldset>\nUse fieldsets for:
\nUse the correct type — browsers provide free validation, appropriate keyboards, and autofill.
| Data | \nInput type | \n
|---|---|
type=\"email\" | \n|
| Phone | \ntype=\"tel\" | \n
| URL | \ntype=\"url\" | \n
| Number | \ntype=\"number\" | \n
| Password | \ntype=\"password\" | \n
| Date | \ntype=\"date\" | \n
| Search | \ntype=\"search\" | \n
| Colour | \ntype=\"color\" | \n
On mobile, type=\"email\" shows the email keyboard, type=\"tel\" shows the numpad. These are free UX improvements.
Allow browsers to autofill. Do not disable it unless there is a security requirement.
\n<input type=\"text\" autocomplete=\"name\">\n<input type=\"email\" autocomplete=\"email\">\n<input type=\"tel\" autocomplete=\"tel\">\n<input type=\"text\" autocomplete=\"street-address\">\n<input type=\"text\" autocomplete=\"postal-code\">\n<input type=\"text\" autocomplete=\"cc-number\"> <!-- credit card -->\n<input type=\"password\" autocomplete=\"new-password\">\nCorrect autocomplete values reduce friction dramatically for returning users and on mobile.
aria-describedby<fieldset> with <legend>type attribute on all inputsautocomplete attributes set on address, contact, and payment fields