Vertical Form Layout

A vertical form layout is one that stacks the labels above the inputs they are tied to. Vertical forms are made with the following classes.

Class

Explanation

.vertical-form

Defines a vertical form.

.vertical-form-alignment

Used to ensure that all children are centered properly

.vertical-form-entry

A div that contains 2 elements: A label followed by an input

Vertical Form Example

Vertical Form Code

<form action="#" class="vertical-form col-start-4 col-end-10 col-start-lg-3 col-end-lg-11 col-start-md-2 col-end-md-12 col-start-sm-1 col-end-sm-13 darkest-white bright-gray-shadow">
    <section class="vertical-form-alignment">
        <div class="vertical-form-entry">
            <label for="test">Test</label>
            <input type="text" id="test">
        </div>
        <div class="vertical-form-entry">
            <label for="test2">Test 2</label>
            <input type="text" id="test2">
        </div>
        <fieldset>
            <legend>Options</legend>
            <div class="checkbox-group">
                <input type="checkbox" id="option1">
                <label for="option1">Option 1</label>
            </div>
            <div class="checkbox-group">
                <input type="checkbox" id="option2">
                <label for="option2">Option 2</label>
            </div>
            <div class="checkbox-group">
                <input type="checkbox" id="option3">
                <label for="option3">Option 3</label>
            </div>
        </fieldset>
    </section>
    <section class="vertical-form-buttons">
        <button class="accept-button">Continue</button>
    </section>
</form>