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. 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-3.5.1.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-3.5.1.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>

<!--Use the <fieldset> tag to group related elements in a form-->
<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>
	<fieldset class="form-section">
		<legend class="h3">Personal information</legend>

		<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>
	</fieldset>

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

		<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>
	</fieldset>

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

		<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>
	</fieldset>
</form>

Multiple groups

Lorem ipsum dolar

Example helper text for the lorem ipsum input.

Lorem ipsum dolar 2

Example helper text for the lorem ipsum input.

Code


<!--Use the <fieldset> tag to group related elements in a form-->
<!--As the labels in both groups have the same text, the fieldset element also helps to distinguish the form fields by their groups. -->
<form class="form-width-xl" data-pl-frm-vld="true" data-pl-frm-ctrl="true">
	<fieldset class="bordered mb-md">
		<legend id="legend-example" class="form-text">Lorem ipsum dolar group</legend>
		<div class="row">
			<!--form-group-responsive is help to adjust the spacing from the div bottom-->
			<div class="col-12 col-md-5 form-group-responsive">
				<label for="ex-group-Lorem">Lorem ipsum</label>
				<input id="ex-group-Lorem" name="ex-group-Lorem" type="text" class="form-control" aria-describedby="t-ex-group-Lorem legend-example">
				<p id="t-ex-group-Lorem" class="form-text">Example helper text for the lorem ipsum input.</p>
			</div>
			<div class="col-12 col-md-4 form-group-responsive">
				<label for="ex-group-neque">Neque</label>
				<input id="ex-group-neque" name="ex-group-neque" type="text" class="form-control" aria-describedby="legend-example">
			</div>
			<div class="col-12 col-md-3 form-group-responsive">
				<button class="cui btn-md utility-btn-solid multiple-group-btn" data-toggle="modal" data-target="#form-modal" aria-describedby="legend-example"> 
					<span class="cicon-minus-thin left" aria-hidden="true"></span>
					Delete
				</button>
			</div>
		</div>
	</fieldset>

	<fieldset class="bordered">
		<legend id="legend-example-2" class="form-text">Lorem ipsum dolar</legend>
		<div class="row">
			<div class="col-12 col-md-5 form-group-responsive">
				<label for="ex-group-Lorem-2">Lorem ipsum</label>
				<input id="ex-group-Lorem-2" name="ex-group-Lorem" type="text" class="form-control" aria-describedby="t-ex-group-Lorem-2 legend-example-2" >
				<p id="t-ex-group-Lorem-2" class="form-text">Example helper text for the lorem ipsum input.</p>
			</div>
			<div class="col-12 col-md-4 form-group-responsive">
				<label for="ex-group-neque-2">Neque</label>
				<input id="ex-group-neque-2" name="ex-group-neque-2" type="text" class="form-control" aria-describedby=" legend-example-2">
			</div>
			<div class="col-12 col-md-3 form-group-responsive">
				<button class="cui btn-md utility-btn-solid multiple-group-btn" data-toggle="modal" data-target="#form-modal" aria-describedby="legend-example-2"> 
					<span class="cicon-minus-thin left" aria-hidden="true"></span>
					Delete
				</button>
			</div>
		</div>
	</fieldset>	
		<button class="cui btn-md utility-btn-solid multiple-group-btn multiple-group-btn-add" >  
			<span class="cicon-plus-thin left" aria-hidden="true"></span>
			Add
		</button>
</form>

<!--form-modal: The alert message will be displayed before delete the form -->
<!-- Button element used to open the modal. Ensure the `data-target` attribute points to the id of the modal. -->

<div id="form-modal" class="cui modal modal-form " tabindex="-1" role="dialog" aria-labelledby="form-modal" aria-hidden="true">
	<div class="modal-dialog modal-fs-mobile"" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h2 id="warning" class="modal-title">
					<span class="cicon-exclamation-triangle coc-main" aria-hidden="true"></span>
					Confirm Delete
				</h2>
			</div>
			<div class="modal-body">
				<p class="mb-0">You are about to lose the information entered in the <Name of the group- e.g., Item 2>.</p>
				<p class="mb-0">Are you sure you want to continue?</p>
			</div>
			<div class="modal-footer">
				<button class="cui btn-md primary">
					<span class="btn-wrapper">
						<span class="btn-text">Yes, Delete</span>
					</span>
				</button>
				<button type="button" class="btn-modal-close cui btn-md primary-text" data-dismiss="modal">
					No, Keep information
				</button>
			</div>
		</div>
	</div>
</div>