Layouts
One column, two columns, or labels beside fields
Stacked
Code
<form action="#" data-demo>
<div class="d-flex flex-column gap-4">
<div><label class="form-label" for="fl-1">Name</label><input id="fl-1" name="fl-1" type="text" class="form-control"></div>
<div><label class="form-label" for="fl-2">Email</label><input id="fl-2" name="fl-2" type="email" class="form-control"></div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>Two columns
Code
<form action="#" data-demo>
<div class="form-grid">
<div><label class="form-label" for="fl-3">First name</label><input id="fl-3" name="fl-3" type="text" class="form-control"></div>
<div><label class="form-label" for="fl-4">Last name</label><input id="fl-4" name="fl-4" type="text" class="form-control"></div>
<div class="span-2"><label class="form-label" for="fl-5">Address</label><input id="fl-5" name="fl-5" type="text" class="form-control"></div>
<div><label class="form-label" for="fl-6">City</label><input id="fl-6" name="fl-6" type="text" class="form-control"></div>
<div><label class="form-label" for="fl-7">Postcode</label><input id="fl-7" name="fl-7" type="text" class="form-control"></div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>Labels beside fields
For settings pages.
Code
<form class="form-horizontal" action="#" data-demo>
<div class="form-row"><label class="form-label" for="fl-8">Company</label><input id="fl-8" name="fl-8" type="text" class="form-control"></div>
<div class="form-row"><label class="form-label" for="fl-9">Website</label><input id="fl-9" name="fl-9" type="text" class="form-control"></div>
<div class="form-row"><label class="form-label" for="fl-10">Phone</label><input id="fl-10" name="fl-10" type="text" class="form-control"></div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>