Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.7)

Note

This page is archived under version 1.7 and is available for reference purposes only. The latest version of Pattern Library is 2.

Example forms

Below are common examples of forms and how they can be laid out. Use the examples below as a baseline for your apps or websites.

Include jquery.validate.min.js and coc.forms.min.js for client-side form validation and to dynamically generate the 'clear' and 'show password' buttons for supported inputs.

Login

Example optional helper text:
Your username is the email you used to sign up for this account.

Example optional helper text:
Your password contains at least 8 characters.

Code


<form class="form-width-md" data-pl-frm-vld="true" data-pl-frm-ctrl="true">
    <div class="form-group">
        <label for="username">Username / email <span class="label-required">(required)</span></label>
        <input id="username" name="username" type="email" class="form-control" maxlength="50" aria-describedby="t-login-username" aria-required="true" required>
        <p id="t-login-username" class="form-text">Example optional helper text:<br>Your username is the email you used to sign up for this account.</p>
    </div>

    <div class="form-group">
        <label for="password">Password <span class="label-required">(required)</span></label>
        <input id="password" name="password" type="password" class="form-control" minlength="8" maxlength="100" aria-describedby="t-login-password" aria-required="true" required>
        <p id="t-login-password" class="form-text">Example optional helper text:<br>Your password contains at least 8 characters.</p>
    </div>

    <div class="form-group clearfix">
        <button class="cui btn-md primary" type="submit">Submit</button>
        <a class="cui btn-md primary-text float-right">Forgot your username or password?</a>
    </div>
</form>

Account registration

All fields are required.

Example optional helper text: Your password should contain at least 8 characters.

Example optional helper text: Enter the same password as above.

Code


<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/coc.forms.js"></script>
<script>
    $( document ).ready( function() {
        COC.Form.init();
    });
</script>

<form class="form-width-md" data-pl-frm-vld="true" data-pl-frm-ctrl="true">
    <div class="form-row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="acc-first-name">First name</label>
                <input id="acc-first-name" name="acc-first-name" type="text" class="form-control" maxlength="50" aria-required="true" required>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="acc-last-name">Last name</label>
                <input id="acc-last-name" name="acc-last-name" type="text" class="form-control" maxlength="50" aria-required="true" required>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="acc-email">Email</label>
        <input id="acc-email" name="acc-email" type="email" class="form-control" maxlength="50" aria-required="true" required>
    </div>

    <div class="form-group">
        <label for="acc-password-1">Password</label>
        <input id="acc-password-1" name="acc-password-1" type="password" class="form-control" minlength="8" maxlength="100" aria-describedby="t-acc-password-1" aria-required="true" required>
        <p id="t-acc-password-1" class="form-text">Example optional helper text: Your password should contain at least 8 characters.</p>
    </div>

    <div class="form-group">
        <label for="acc-password-2">Re-enter your password</label>
        <input id="acc-password-2" name="acc-password-2" type="password" class="form-control" minlength="8" maxlength="100" data-rule-equalTo="#acc-password-1" aria-describedby="t-acc-password-2" aria-required="true" required>
        <p id="t-acc-password-2" class="form-text">Example optional helper text: Enter the same password as above.</p>
    </div>

    <div class="form-group">
        <div class="form-check form-check-inline">
            <input id="acc-terms" name="acc-terms" type="checkbox" class="form-check-input" aria-required="true" required>
            <label for="acc-terms" class="form-check-label">By checking this box, I agree to the <a href="terms.html" target="_blank">Terms and Conditions</a>.</label>
        </div>
    </div>

    <div class="form-group">
        <button class="cui btn-md primary" type="submit">Submit</button>
    </div>
</form>

Detailed registration

Form heading

Personal information

Address example 1: one field

Address example 2: three fields

Address example 3: five fields

Format: A1A1A1

Contact Information

Example optional helper text:
Format: XXX-XXX-XXXX

Example optional helper text:
Format: XXX-XXX-XXXX

Example optional helper text:
Format: XXX-XXX-XXXX

Additional information

Do you wish to recieve email communications from lorem ipsum dolar?
This is an example legal section where you may link to the Terms and Conditions and / or Privacy Policy, along with any other required legal text. (required)

Code


<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/coc.forms.js"></script>
<script>
    $( document ).ready( function() {
        COC.Form.init();
    });
</script>

<form class="form-width-lg" data-pl-frm-vld="true" data-pl-frm-ctrl="true">
    <div class="cui subtitle-block">
        <h2>Form heading</h2>
        <hr>
    </div>
    <section class="form-section">
        <h3>Personal information</h3>

        <div class="form-row">
            <div class="col-6 col-md-2">
                <div class="form-group">
                    <label for="honorific">Title</label>
                    <select id="honorific" name="honorific" class="form-control">
                        <option value="">Select&hellip;</option>
                        <option value="dr">Dr.</option>
                        <option value="mr">Mr.</option>
                        <option value="mrs">Mrs.</option>
                        <option value="ms">Ms.</option>
                        <option value="miss">Miss</option>
                    </select>
                </div>
            </div>

            <!-- Force next columns to break to new line for small breakpoint only -->
            <div class="cui-width-100 d-none d-sm-block d-md-none"></div>

            <div class="col-sm-6 col-md-5">
                <div class="form-group">
                    <label for="first-name">First name <span class="label-required">(required)</span></label>
                    <input id="first-name" name="first-name" type="text" class="form-control" maxlength="50" aria-required="true" required>
                </div>
            </div>
            <div class="col-sm-6 col-md-5">
                <div class="form-group">
                    <label for="last-name">Last name <span class="label-required">(required)</span></label>
                    <input id="last-name" name="last-name" type="text" class="form-control" maxlength="50" aria-required="true" required>
                </div>
            </div>
        </div>

        <div class="form-group">
            <h4>Address example 1: one field</h4>
            <label for="ex-1-address">Address <span class="label-required">(required)</span></label>
            <input id="ex-1-address" name="ex-1-address" type="text" class="form-control" maxlength="100" aria-required="true" required>
        </div>

        <h4>Address example 2: three fields</h4>
        <div class="form-row">
            <div class="col-6 col-sm-4">
                <div class="form-group">
                    <label for="ex-2-unit">Unit number</label>
                    <input id="ex-2-unit" name="ex-2-unit" type="text" class="form-control" maxlength="10">
                </div>
            </div>
            <div class="col-sm-8">
                <div class="form-group">
                    <label for="ex-2-street-address">Street address <span class="label-required">(required)</span></label>
                    <input id="ex-2-street-address" name="ex-2-street-address" type="text" class="form-control" maxlength="100" aria-required="true" required>
                </div>
            </div>
            <div class="col-6 col-sm-4">
                <div class="form-group">
                    <label for="ex-2-quadrant">Quadrant <span class="label-required">(required)</span></label>
                    <select id="ex-2-quadrant" name="ex-2-quadrant" class="form-control" aria-required="true" required>
                        <option value="">Select&hellip;</option>
                        <option value="nw">NW</option>
                        <option value="ne">NE</option>
                        <option value="sw">SW</option>
                        <option value="se">SE</option>
                    </select>
                </div>
            </div>
        </div>

        <h4>Address example 3: five fields</h4>
        <div class="form-row">
            <div class="col-6 col-sm-6">
                <div class="form-group">
                    <label for="ex-3-suite">Unit number</label>
                    <input id="ex-3-suite" name="ex-3-suite" type="text" class="form-control" maxlength="10">
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="ex-3-building-num">Building number <span class="label-required">(required)</span></label>
                    <input id="ex-3-building-num" name="ex-3-building-num" type="text" class="form-control" maxlength="10" aria-required="true" required>
                </div>
            </div>
            <div class="col-sm-8 col-md-6">
                <div class="form-group">
                    <label for="ex-3-street-name">Street name <span class="label-required d-md-blocks">(required)</span>
                    </label>
                    <input id="ex-3-street-name" name="ex-3-street-name" type="text" class="form-control" maxlength="100" aria-required="true" required>
                </div>
            </div>
            <div class="col-6 col-sm-4 col-md-3">
                <div class="form-group">
                    <label for="ex-3-street-type">Street type <span class="label-required">(required)</span></label>
                    <select id="ex-3-street-type" name="ex-3-street-type" class="form-control" aria-required="true" required>
                        <option value="">Select&hellip;</option>
                        <option value="1">Alley</option>
                        <option value="2">Avenue</option>
                        <option value="3">Bay</option>
                        <option value="4">Boulevard</option>
                        <option value="5">&hellip;</option>
                    </select>
                </div>
            </div>
            <div class="col-6 col-sm-4 col-md-3">
                <div class="form-group">
                    <label for="ex-3-quadrant">Quadrant <span class="label-required">(required)</span></label>
                    <select id="ex-3-quadrant" name="ex-3-quadrant" class="form-control" aria-required="true" required>
                        <option value="">Select&hellip;</option>
                        <option value="nw">NW</option>
                        <option value="ne">NE</option>
                        <option value="sw">SW</option>
                        <option value="se">SE</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="form-row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="city">City <span class="label-required">(required)</span></label>
                    <input id="city" name="city" type="text" class="form-control" maxlength="50" aria-required="true" required>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="province">Province <span class="label-required">(required)</span></label>
                    <select id="province" name="province" class="form-control" aria-required="true" required>
                        <option value="">Select your province</option>
                        <option value="1">Alberta</option>
                        <option value="2">British Columbia</option>
                        <option value="3">Manitoba</option>
                        <option value="4">New Brunswick</option>
                        <option value="5">Newfoundland and Labrador</option>
                        <option value="6">Northwest Territories</option>
                        <option value="7">Nova Scotia</option>
                        <option value="8">Nunavut</option>
                        <option value="9">Ontario</option>
                        <option value="10">Prince Edward Island</option>
                        <option value="11">Quebec</option>
                        <option value="12">Saskatchewan</option>
                        <option value="13">Yukon</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="postal-code">Postal code <span class="label-required">(required)</span></label>
            <div class="input-width-sm">
                <input id="postal-code" name="postal-code" type="text" class="form-control" minlength="6" maxlength="7" aria-describedby="t-postal-code" aria-required="true" required>
            </div>
            <p id="t-postal-code" class="form-text">Format: A1A1A1</p>
        </div>
    </section>

    <section class="form-section">
        <h3>Contact Information</h3>

        <div class="form-group">
            <label for="email">Email address <span class="label-required">(required)</span></label>
            <div class="input-width-lg">
                <input id="email" name="email" type="email" class="form-control" maxlength="60" aria-required="true" required>
            </div>
        </div>

        <div class="form-group">
            <label for="tel-home">Home phone</label>
            <div class="input-width-md">
                <input id="tel-home" name="tel-home" type="tel" class="form-control" maxlength="30" aria-describedby="t-tel-home">
            </div>
            <p id="t-tel-home" class="form-text">Example optional helper text:<br>Format: XXX-XXX-XXXX</p>
        </div>
        <div class="form-group">
            <label for="tel-mobile">Mobile phone</label>
            <div class="input-width-md">
                <input id="tel-mobile" name="tel-mobile" type="tel" class="form-control" maxlength="30" aria-describedby="t-tel-mobile">
            </div>
            <p id="t-tel-mobile" class="form-text">Example optional helper text:<br>Format: XXX-XXX-XXXX</p>
        </div>

        <div class="form-group">
            <label for="tel-work">Work phone</label>
            <div class="input-width-md">
                <input id="tel-work" name="tel-work" type="tel" class="form-control" maxlength="30" aria-describedby="t-tel-work">
            </div>
            <p id="t-tel-work" class="form-text">Example optional helper text:<br>Format: XXX-XXX-XXXX</p>
        </p>
    </section>

    <section class="form-section">
        <h3>Additional information</h3>

        <fieldset class="form-group bordered">
            <legend id="legend-example-check" class="form-text">Do you wish to recieve email communications from lorem ipsum dolar?</legend>
            <div class="form-check">
                <input type="radio" class="form-check-input" name="example-radio" id="example-radio-1" value="1" aria-describedby="legend-example-check">
                <label for="example-radio-1" class="form-check-label">Yes</label>
            </div>
            <div class="form-check">
                <input type="radio" class="form-check-input" name="example-radio" id="example-radio-0" value="0" aria-describedby="legend-example-check">
                <label for="example-radio-0" class="form-check-label">No</label>
            </div>
        </fieldset>

        <fieldset class="form-group">
            <legend id="legend-terms" class="form-text">This is an example legal section where you may link to the <a href="terms.html" target="_blank">Terms and Conditions</a> and&hairsp;/&hairsp;or <a href="privacy.html" target="_blank">Privacy Policy</a>, along with any other required legal text. <span class="label-required">(required)</span></legend>
            <div class="form-check form-check-inline">
                <input id="terms" name="terms" type="checkbox" class="form-check-input" value="1" aria-describedby="legend-terms" aria-required="true" required>
                <label for="terms" class="form-check-label">By checking this box, I agree to the Terms and Conditions.</label>
            </div>
        </fieldset>

        <div class="form-group">
            <button class="cui btn-md primary" type="submit">Submit</button>
        </div>
    </section>
</form>