Form Layout Patterns
Arrange labels and inputs in stacked or inline layouts using flex and grid, with consistent gap and alignment utilities.
Why Form Layout Matters
A form's layout is as important as the styling of its individual fields. A well-structured form guides users through completion naturally, while a poorly arranged one increases abandonment. Form layout encompasses how labels and inputs are positioned, how multi-column fields are arranged, and how actions like submit and cancel are placed.
Tailwind's flex and grid utilities make all of these arrangements straightforward without writing any custom CSS.
Stacked (Vertical) Form Layout
The stacked layout places labels directly above their inputs, which is the most mobile-friendly and readable approach. Each label-input pair lives in a flex flex-col gap-1 container, and the entire form uses space-y-5 between pairs.
This layout is proven to have the highest completion rates because users read the label before seeing the input, setting context before they must act.
<form class="max-w-md space-y-5">
<div class="flex flex-col gap-1">
<label for="fname" class="text-sm font-medium text-gray-700">First name</label>
<input id="fname" type="text" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
</div>
<div class="flex flex-col gap-1">
<label for="email" class="text-sm font-medium text-gray-700">Email address</label>
<input id="email" type="email" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
</div>
<button type="submit" class="w-full py-2.5 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">
Submit
</button>
</form>