Form layout — columns and sections
A wall of single-column inputs is hard to scan. Sections + column widths fix that.
Sections — group fields by topic
Group your fields into 3–5 sections. Each section gets a title that tells the user what they're about to fill in.
Good section names for a leave application:
- Applicant details — staff name, IC, department.
- Leave details — start date, end date, type of leave, reason.
- Supporting documents — attachments.
Sections are visual only — they don't add or constrain anything in the database.
Column widths
Inside a section, every field has a width:
- Full — fills the row.
- Half — two fields share a row (good for short inputs).
- Third — three fields share a row.
- Two-thirds — pairs nicely with Third for an asymmetric layout.
Recipes
Two short inputs side-by-side:
[ Start Date — Half ] [ End Date — Half ]
Number + unit:
[ Amount — Two-thirds ] [ Currency — Third ]
Long text always full:
[ Reason — Full ]
[ Notes — Full ]
Help text
Add a one-sentence hint to the input that's most likely to confuse:
Field: IC Number
Help: Use the new IC format — 12 digits, no dashes.
The hint shows below the input in muted grey. Don't add help to every field; users tune it out.
Headings, text, alerts
Sometimes a section title isn't enough. Use these block types between fields:
- Heading — a smaller sub-title.
- Text — a paragraph of explanation. Use for context the user needs before filling in the next group of fields.
- Alert — a coloured box for warnings ("Once submitted, you cannot edit."), info notices, or success messages.
Where to next
- Form modes — create, edit, show — keep three modes consistent.
- Validation messages — when the user types something wrong.