Form Layouts
Horizontal, vertical, floating label, multi-column and multi-step form patterns
Vertical Form — Employee Details
Standard top-to-bottom stacked layout
Horizontal Form — HR Settings
Label on the left, field on the right — ideal for settings pages
Verified email address
Must be a number between 1 and 7
Floating Labels
Labels float up when the field is focused or has a value
Multi-Column Form — Complete Employee Onboarding
Dense data-entry form with logical column groupings
Personal Information
Employment Details
Compensation
Multi-Step Wizard — Leave Application
Step-by-step guided form with progress indicator
1
Leave Type
2
Dates
3
Review
Your current Annual Leave balance: 12 days
Application Summary
Leave TypeAnnual Leave
Start Date26 Apr 2026
End Date30 Apr 2026
Total Days5 days
All details look good. Submit to send to your manager for approval.
✅
Leave Application Submitted!
Your manager will review and respond within 24 hours.