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:

Vertical layout

Form label:

Checkbox

Vertical block layout

Form label:

Checkbox

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:

Form label:

Label:

Form label:

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>

Fixed lengths

In some cases you might need to set fixed length (width) of form controls. In that situation you can use wrapper .form-control and additional class .form-control-fixed-[1-12] to set lengths.

Example:

Code:

<div class="form-control form-control-fixed-1">
  <input class="input" placeholder="1 length" type="text">
</div>

<div class="form-control form-control-fixed-2">
  <input class="input" placeholder="2 length" type="text">
</div>

<div class="form-control form-control-fixed-3">
  <input class="input" placeholder="3 length" type="text">
</div>

<div class="form-control form-control-fixed-4">
  <input class="input" placeholder="4 length" type="text">
</div>

<div class="form-control form-control-fixed-5">
  <input class="input" placeholder="5 length" type="text">
</div>

<div class="form-control form-control-fixed-6">
  <input class="input" placeholder="6 length" type="text">
</div>

<div class="form-control form-control-fixed-7">
  <input class="input" placeholder="7 length" type="text">
</div>

<div class="form-control form-control-fixed-8">
  <input class="input" placeholder="8 length" type="text">
</div>

<div class="form-control form-control-fixed-9">
  <input class="input" placeholder="9 length" type="text">
</div>

<div class="form-control form-control-fixed-10">
  <input class="input" placeholder="10 length" type="text">
</div>

<div class="form-control form-control-fixed-11">
  <input class="input" placeholder="11 length" type="text">
</div>

<div class="form-control form-control-fixed-12">
  <input class="input" placeholder="12 length" type="text">
</div>