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.5)

Note

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

Form layout

Global files
  1. coc-basic-style.css
  2. cicon-package.zip
  3. bootstrap-grid.css (4.4.1)
  4. jquery-3.5.1.min.js
Pattern files
  1. coc-forms.css
  2. jquery.validate.js
  3. jquery.validate.min.js
  4. coc.forms.js
  5. coc.forms.min.js

Widths

By default, .form-controls are block-level elements set to be 100% width of their parent.

Control the width of the form-controls by applying width classes to the <form> or to the <input>.

Form widths

Please DO

The following input is wrapped inside a <form> with the .form-width-md class.

Please DON’T

The following input does not have any appropriate width or max-width wrapping it or applied to it. It takes up an excessive amount of space on larger screens.

Input widths

Certain types of inputs like names, phone numbers, and postal codes require only a handful of characters. It is recommended to apply sizing classes to these kinds of <input>s to give them an appropriate width relative to the input you are expecting. This provides a visual cue for the user on the length of information they should enter.

Note: These input width classes are best applied when the inputs are on their own row or line. When using a form grid layout, there may not be a need to use these input width classes.

For illustration purposes, the following <form> has been given a border to showcase its width boundaries.

This full-width input size may be suitable for addresses, textareas, and any other longer inputs.

Class name: input-width-lg
This input size may be suitable for email addresses, passwords, and any other longer inputs that may not need to be full-width.

Class name: input-width-md
This input size may be suitable for first, last, city names, and any other medium-sized inputs.

Class name: input-width-sm
This input size may be suitable for postal codes, suite numbers, quadrant selectors, and any other smaller inputs.

Form groups

Use the .form-group class to group labels, inputs, optional help text, and form validation messaging. The class contains styles for margin-bottom spacing.

Example helper text for the username input.


<form class="form-width-md">
    <div class="form-group">
        <label for="ex-group-username">Username</label>
        <input id="ex-group-username" name="ex-group-username" type="text" class="form-control" aria-describedby="t-ex-group-username">
        <p id="t-ex-group-username" class="form-text">Example helper text for the username input.</p>
    </div>

    <div class="form-group">
        <label for="ex-group-password">Password</label>
        <input id="ex-group-password" name="ex-group-password" type="text" class="form-control">
    </div>
</form>

Form sections

Use the .form-section class to group multiple inputs or .form-groups. The class contains larger margin-bottom spacing compared to the .form-group.

Add headings to label the sections.

Example form section heading

Another example form section heading


<form class="form-width-md">
    <section class="form-section">
        <h3>Example form section heading</h3>
        <div class="form-group">
            …
        </div>
        <div class="form-group">
            …
        </div>
    </section>
    <section class="form-section">
        <h3>Another example form section heading</h3>
        <div class="form-group">
            …
        </div>
        <div class="form-group">
            …
        </div>
    </section>
</form>

Form grid

The responsive Boostrap grid system can be used to create form layouts with multiple inputs per row.

Please DO

Group related inputs together.

Example 1

Example 2

Code 


<form class="form-width-md">
    <h4>Example 1</h4>
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="ex-grid-first-name">First Name</label>
                <input id="ex-grid-first-name" name="ex-grid-first-name" type="text" class="form-control">
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="ex-grid-last-name">Last Name</label>
                <input id="ex-grid-last-name" name="ex-grid-last-name" type="text" class="form-control">
            </div>
        </div>
    </div>

    <h4>Example 2</h4>
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="ex-grid-unit">
                    <span class="field-name">Unit #</span>
                 </label>
                <input id="ex-grid-unit" name="ex-grid-unit" type="text" class="form-control" maxlength="10">
            </div>
        </div>
        <div class="col-sm-8">
            <div class="form-group">
                <label for="ex-grid-street-address">
                    <span class="field-name">Street address</span>
                    <span class="label-required">(required)</span>
                </label>
                <input id="ex-grid-street-address" name="ex-grid-street-address" type="text" class="form-control" aria-required="true" required>
            </div>
        </div>
    </div>
</form>
Please DON’T

Do not group un-related inputs together.



Form row

You can also swap .row with .form-row, a variation of the standard grid row with tighter gutter spaces. Use this class for tighter and more compact form layouts.


<form>
    <div class="form-row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="first-name">First Name</label>
                <input id="first-name" name="first-name" type="text" class="form-control">
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="last-name">Last Name</label>
                <input id="last-name" name="last-name" type="text" class="form-control">
            </div>
        </div>
    </div>
</form>