form-design

# Form Design 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. --- ## The Three Guidance Layers Each layer serves a distinct purpose. Do not collapse them. ### Layer 1 — Helper Text Explains *what* to enter. Appears below the input, always visible, in small secondary text. ``` Email address [ ] Use the email you signed up with. ``` - Write in plain language from the user's perspective - Keep it to one sentence — if you need more, the field is too complex or misnamed - Do not repeat the label ("Enter your email" below a label that says "Email" is redundant) - Helper text is not a replacement for a label — the label is still required ### Layer 2 — Placeholder Shows the *format* or an example value. Appears inside the input, disappears on typing. ``` [jane@example.com ] ``` - Use a realistic example, not a description: `+358 40 123 4567` not `Enter phone number` - Never use placeholder as a label — it disappears and leaves the user without context - Keep it grey (`--color-text-secondary`) and lighter than actual input text - Optional — not every field needs a placeholder ### Layer 3 — Validation Confirms whether the input is correct. The most important layer. ``` Email address [jane@ ] ← invalid ✗ Enter a valid email address. ``` **Validation...