Vitreo
Forms

Layouts

One column, two columns, or labels beside fields

Stacked

Code 
<form action="#" data-demo>
  <div class="flex flex-col gap-4">
    <div><label class="form-label" for="fl-1">Name</label><input id="fl-1" name="fl-1" type="text" class="input"></div>
    <div><label class="form-label" for="fl-2">Email</label><input id="fl-2" name="fl-2" type="email" class="input"></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="input"></div>
    <div><label class="form-label" for="fl-4">Last name</label><input id="fl-4" name="fl-4" type="text" class="input"></div>
    <div class="span-2"><label class="form-label" for="fl-5">Address</label><input id="fl-5" name="fl-5" type="text" class="input"></div>
    <div><label class="form-label" for="fl-6">City</label><input id="fl-6" name="fl-6" type="text" class="input"></div>
    <div><label class="form-label" for="fl-7">Postcode</label><input id="fl-7" name="fl-7" type="text" class="input"></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="input"></div>
  <div class="form-row"><label class="form-label" for="fl-9">Website</label><input id="fl-9" name="fl-9" type="text" class="input"></div>
  <div class="form-row"><label class="form-label" for="fl-10">Phone</label><input id="fl-10" name="fl-10" type="text" class="input"></div>
  <div class="form-actions">
    <button type="submit" class="btn btn-primary">Save</button>
  </div>
</form>
© Vitreo. All rights reserved.