Form Grid
The form grid is a way to structure a form in to rows and columns.
Usage
Use the class form-row to create tighter gutter spacing between columns allowing for a more compact layout.
Use the column grid system as usual within the form-row.
forms\grid-input.hbs
<form>
<fieldset aria-label="Name">
<legend>Name details example</legend>
<div class="form-row">
<div class="col-6">
<div class="slb-form__group">
<input type="text" class="slb-form__control-block" id="exampleInputText-formGrid1" />
<label class="slb-form__label" for="exampleInputText-formGrid1">Name</label>
<span class="slb-form__bar"></span>
</div>
</div>
<div class="col-6">
<div class="slb-form__group">
<input type="email" class="slb-form__control-block" id="exampleInputText-formGrid2" />
<label class="slb-form__label" for="exampleInputText-formGrid2">Email</label>
<span class="slb-form__bar"></span>
</div>
</div>
</div>
</fieldset>
<fieldset aria-label="Name">
<legend>Address details example</legend>
<div class="form-row">
<div class="col-6">
<div class="slb-form__group">
<input type="text" class="slb-form__control-block" id="exampleInputText-formGrid3" />
<label class="slb-form__label" for="exampleInputText-formGrid3">City</label>
<span class="slb-form__bar"></span>
</div>
</div>
<div class="col-3">
<div class="slb-form__group">
<select type="text" class="slb-form__control-block" id="exampleInputText-slb-form__control-block">
<option value=""></option>
<option value="first">First</option>
<option value="second">Second</option>
<option value="third">Third</option>
</select>
<label class="slb-form__label" for="exampleInputText-slb-form__control-block">Coutry</label>
<svg class="slb-icon slb-form__icon" viewBox="0 0 320 512" id="caret-down-slb-form__control-block"><title>caret-down</title><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
<span class="slb-form__bar"></span>
</div>
</div>
<div class="col-3">
<div class="slb-form__group">
<input type="text" class="slb-form__control-block" id="exampleInputText-formGrid4" />
<label class="slb-form__label" for="exampleInputText-formGrid4">Postcode</label>
<span class="slb-form__bar"></span>
</div>
</div>
</div>
</fieldset>
</form>
Source:
components/forms/_form-grid.scss