Layouts

Documentation of possible form layouts including vertical, multicolumn and inline layout.

Files

app/styles/modules/_forms.scss

Form layouts

Form layouts consists of containers as .form-row, .form-label, .form-controls and .from-control.

The main container .form-row have two children containers .form-label and .form-controls. The .form-label contains basic label for form controls. The .form-controls container can contains one or more .form-control containers.

Note

Layouts are using same classes as grid to represent row (.form-row) and columns (.form-label, .form-controls). Thus width of elements containers can be set the same way as grid.

Vertical

Vertical layout is the most basic form layout and can be created by following principles shown in example below. In case you need more form components for one form label, you can use vertical block layout. This layout can be created by using additional class .form-controls-block on .form-controls element.

Example:code

Vertical layout

Vertical block layout

Code: 
<!-- vertical layout -->
<div class="row form-row">
  <div class="form-label col">
    <label for="...">...</label>
  </div>
  <div class="form-controls col">
    <div class="form-control">
      <input placeholder="..." id="..." class="input" type="text">
    </div>
  </div>
</div>

<div class="row form-row">
  <div class="form-label col"> ... </div>
  <div class="form-controls col"> ... </div>
</div>

<div class="row form-row">
  <div class="form-label col"> ... </div>
  <div class="form-controls col"> ... </div>
</div>

<!-- vertical block layout -->
<div class="row form-row">
  <div class="form-label col">
    <label for="...">Form label:</label>
  </div>
  <div class="form-controls form-controls-block col">
    <div class="form-control">
      <input placeholder="..." id="..." class="input" type="text">
    </div>
    <div class="form-control">
      ...
    </div>
    <div class="checkbox">
      ...
    </div>
  </div>
</div>

Multicolumn

Multicolumn layout can be created easily by combining Grid 12 with form layout as shown in example below.

Example:code
Code: 
<div class="row">
  <div class="col col-l-3 col-m-5 col-s-6 col-xs-12">
    <div class="row form-row">
      <div class="form-label col">
        <label for="...">Form label:</label>
      </div>
      <div class="form-controls col">
        <div class="form-control">
          <input placeholder="..." id="..." class="input" type="text">
        </div>
      </div>
    </div>
  </div>

  <div class="col col-l-1 col-m-2 col-s-6 col-xs-12">
    <div class="row form-row">
      ...
    </div>
  </div>

  <div class="col col-l-3 col-m-5 col-s-12 col-xs-12">
    <div class="row form-row">
      ...
    </div>
  </div>

  <div class="col col-l-2 col-m-6 col-xs-12">
    <div class="row form-row">
      ...
    </div>
  </div>
  
  <div class="col col-l-3 col-m-6 col-xs-12">
    <div class="row form-row">
      ...
    </div>
  </div>
</div>