Documentation of possible form layouts including vertical and multicolumn.
Form layouts consists of containers as
The main container
.form-control has form component as children. Alongside form component other containers
.form-text can be used to display additional information. The
.form-label contains basic label for form controls.
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 --> <div class="row"> <div class="col col--l-6 col--s-2"> <div class="form-control ...">></div> ... <hr /> ... </div> </div>
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
<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>