Documentation of possible form layouts including vertical and multicolumn.
Files
app/styles/modules/_forms.scss
Form layouts
Form layouts consists of containers as .form-control
, .form-label
and .form-text
.
The main container .form-control
has form component as children. Alongside form component other containers .form-label
and .form-text
can be used to display additional information. The .form-label
contains basic label for form controls.
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-block
as shown on example below.
Vertical layout
Vertical layout
<!-- vertical layout -->
<div class="row">
<div class="col col--l-6 col--s-2">
<div class="form-control ...">></div>
...
<hr />
...
</div>
</div>
Multicolumn
Multicolumn layout can be created easily by combining Grid with form layout as shown in example below. Different size of gutters between form columns can be achieved with .row--form
modificator on .row
element.
<div class="row">
<div class="col col--l-3 col--m-5 col--s-6 col--2">
<div class="form-control ...">
...
</div>
</div>
...
<div class="col col--l-1 col--m-2 col--s-6 col--2">
<div class="form-control ...">
...
</div>
</div>
</div>