Documentation

Search value is required

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.

Name details example
Address details example
caret-down
Markup: forms\grid-input.hbs Copy
<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