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

Note

This page is archived under version 1.8 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.

The width of form inputs should be adjusted to visually match the character size of the information expected for the user to enter. For example, the average email address is going to be lengthier than a postal code therefore their input widths should be adjusted accordingly. This type of consideration allows for a better user experience when filling in the form.

There are several ways the widths can be controlled. It is easiest to start when the form itself has a width applied. This sets the boundaries for all of the form inputs inside.

Form widths

Please DO

Apply either of the width classes form-width-md or form-width-lg to the <form> element.

For demonstration purposes, the following <form>s are given a dashed border to visualize their width boundaries.

The following form has the form-width-md class applied.

The following form has the form-width-lg class applied.

Code 


<!-- Use `form-width-md` for a medium form width. Or use `form-width-lg` for a slightly larger form width. -->
<form class="{{ form-width-md | form-width-lg }}">
	<div class="form-group">
		<label for="{{ Input id }}">{{ Label }}</label>
		<input id="{{ Input id }}" name="{{ Input name }}" type="text" class="form-control">
	</div>
</form>
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 demonstration purposes, the following <form> has been given a dashed border to visualize 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.

Code 


<!-- Use `form-width-md` for a medium form width. Or use `form-width-lg` for a slightly larger form width. -->
<form class="{{ form-width-md | form-width-lg }}">
	<div class="form-group">
		<label for="{{ Input id }}">{{ Label }}</label>
		<!-- Use the input-width class that best suits the input.
			 Or don't add the input-width classes to keep the width of the input 100%. -->
		<input id="{{ Input id }}" name="{{ Input name }}" type="text" class="form-control {{ input-width-lg | input-width-md | input-width-sm }}">
	</div>
</form>

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.

Code 


<form class="form-width-md">
	<div class="form-group">
		<label for="{{ Input id }}">{{ Label }}</label>
		<input id="{{ Input id }}" name="{{ Input name }}" type="text" class="form-control">
	</div>
	<div class="form-group">
		<label for="{{ Input id }}">{{ Label }}</label>
		<input id="{{ Input id }}" name="{{ Input name }}" 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

Code 


<form class="form-width-md">
	<fieldset class="form-section">
		<legend class="h4">{{ Legend }}</legend>
		<div class="form-group">
			...
		</div>
		<div class="form-group">
			...
		</div>
	</fieldset>
	<fieldset class="form-section">
		...
	</fieldset>
</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">
	<h2>{{ Heading }}</h2>
	<div class="row">
		<div class="col-sm-6">
			<div class="form-group">
				<label for="{{ Input id }}">{{ Label }}</label>
				<input id="{{ Input id }}" name="{{ Input name }}" type="text" class="form-control">
			</div>
		</div>
		<div class="col-sm-6">
			<div class="form-group">
				<label for="{{ Input id }}">{{ Label }}</label>
				<input id="{{ Input id }}" name="{{ Input name }}" type="text" class="form-control">
			</div>
		</div>
	</div>

	<h2>{{ Heading }}</h2>
	<div class="row">
		<div class="col-sm-4">
			<div class="form-group">
				<label for="{{ Input id }}">{{ Label }}</label>
				<input id="{{ Input id }}" name="{{ Input name }}" type="text" class="form-control">
			</div>
		</div>
		<div class="col-sm-8">
			<div class="form-group">
				<label for="{{ Input id }}">{{ Label }}</label>
				<input id="{{ Input id }}" name="{{ Input name }}" type="text" class="form-control">
			</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.

Code 


<form>
	<div class="form-row">
		<div class="col-sm-6">
			<div class="form-group">
				<label for="{{ Input id }}">{{ Label }}</label>
				<input id="{{ Input id }}" name="{{ Input name }}" type="text" class="form-control">
			</div>
		</div>
		<div class="col-sm-6">
			<div class="form-group">
				<label for="{{ Input id }}">{{ Label }}</label>
				<input id="{{ Input id }}" name="{{ Input name }}" type="text" class="form-control">
			</div>
		</div>
	</div>
</form>