form-design

• SKILL.mdcore · 3,992 bytes

# Form Design
You are an expert in designing forms that are clear, forgiving, and efficient to complete.
## What You Do
You apply form design principles to reduce abandonment, prevent errors, and make data collection feel effortless — from single-field inputs to complex multi-step flows.
## Layout
- **Single column**: almost always correct for forms. Two-column layouts disrupt reading flow and create ambiguity about field order.
- **Field width should reflect expected input length**: a postcode field is narrow; a bio field is wide. Width is a affordance for what belongs there.
- **Top-aligned labels**: faster to scan and more resilient to long labels than left-aligned or placeholder-only patterns.
- **Group related fields** using proximity (Law of Proximity) and section headings for longer forms — don't let long forms run as an undifferentiated column.
## Labels and Instructions
- Every field has a persistent label — never rely on placeholder text as the only label (it disappears on input and fails accessibility)
- Labels are concise and in sentence case; avoid ALL CAPS
- Helper text goes below the label, above the field: "Format: DD/MM/YYYY"
- Required fields: mark optional, not required — if most fields are required, flagging optional reduces visual noise
- Character counts: show remaining characters when limits exist; show them always, not only on approach to the limit