Form components - Pattern Library

Form controls

Textual form controls—like <input>s, <select>s, and <textarea>s— are styled with the .form-control class. Included are styles for the general appearance, focus state, and more.

Notes

Below are a few important notes about form controls:

All form controls including <input>s, <select>s, and <textarea>s should have a corresponding <label>.
The <label>’s for attribute should match the id attribute of the input element.
The form control’s name attribute is used to identify the data when the form is submitted.

For detailed information on form inputs and their attributes, read the documentation on form inputs on MDN.

Code


<form>
    <!-- Example text input -->
    <fieldset class="form-group">
        <label for="{{ Input id }}">{{ Label }}</label>
        <input id="{{ Input id }}" name="{{ Input name }}" type="text" class="form-control">
    </fieldset>

    <!-- Example select -->
    <fieldset class="form-group">
        <label for="{{ Input id }}">{{ Label }}</label>
        <select id="{{ Input id }}" name="{{ Input name }}" class="form-control">
            <option value="1">{{ Example option 1 }}</option>
            <option value="2">{{ Example option 2 }}</option>
            <option value="3">{{ Example option 3 }}</option>
        </select>
    </fieldset>

    <!-- Example multiple select -->
    <fieldset class="form-group">
        <label for="{{ Input id }}">{{ Label }}</label>
        <select id="{{ Input id }}" name="{{ Input name }}" class="form-control" multiple>
            <option value="1">{{ Example option 1 }}</option>
            <option value="2">{{ Example option 2 }}</option>
            <option value="3">{{ Example option 3 }}</option>
        </select>
    </fieldset>

    <!-- Example textarea -->
    <fieldset class="form-group">
        <label for="{{ Input id }}">{{ Label }}</label>
        <!-- Increase the value of the rows attribute to adjust the size of the textarea -->
        <textarea id="{{ Input id }}" name="{{ Input name }}" class="form-control" rows="3"></textarea>
    </fieldset>
</form>

Readonly

Ideally, readonly inputs should be displayed as plain text so the user does not confuse the value as being editable. Use the class .form-control-plaintext to remove the default form-control styling while preserving the correct line-height and padding.

Code


<fieldset class="form-group">
    <label for="{{ Input id }}">{{ Label }}</label>
    <input id="{{ Input id }}" name="{{ Input name }}" type="text" class="form-control-plaintext" value="{{ Value }}" readonly>
</fieldset>

Disabled

Add the disabled boolean attribute on an input to prevent user interactions. Disabled form elements will appear with a light grey background.

Code


<fieldset class="form-group">
    <label for="{{ Input id }}">{{ Label }}</label>
    <input id="{{ Input id }}" name="{{ Input name }}" type="text" class="form-control" value="{{ Value }}" disabled>
</fieldset>

Checkboxes and radios

Use the .form-check class to style both checkbox and radio inputs and their corresponding labels. Checkboxes are for selecting one or several options in a list, while radios are for selecting only one option from a list.

Checkboxes and radios should be grouped inside a <fieldset> tag. An optional .bordered class can be applied to the fieldset. The <legend> tag within a fieldset may be used to caption the checkbox or radio elements.

Stacked

Code


<!-- For a bordered style, use the class `bordered`. -->
<fieldset class="form-group {{ bordered }}">
    <legend>{{ Legend }}</legend>
    <div class="form-check">
        <input id="{{ Input id }}" name="{{ Input name }}" type="{{ checkbox | radio }}" class="form-check-input" value="{{ Value }}">
        <label for="{{ Input id }}" class="form-check-label">{{ Label }}</label>
    </div>
    <!-- Disabled -->
    <div class="form-check">
        <input id="{{ Input id }}" name="{{ Input name }}" type="{{ checkbox | radio }}" class="form-check-input" value="{{ Value }}" disabled>
        <label for="{{ Input id }}" class="form-check-label">{{ Label }}</label>
    </div>
</fieldset>

Inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

Code


<!-- For a bordered style, use the class `bordered`. -->
<fieldset class="form-group {{ bordered }}">
    <legend>{{ Legend }}</legend>
    <div class="form-check form-check-inline">
        <input id="{{ Input id }}" name="{{ Input name }}" type="{{ checkbox | radio }}" class="form-check-input" value="{{ Value }}">
        <label for="{{ Input id) }}" class="form-check-label">{{ Label }}</label>
    </div>
    <!-- Disabled -->
    <div class="form-check form-check-inline">
        <input id="{{ Input id }}" name="{{ Inputname }}" type="{{ checkbox | radio }}" class="form-check-input" value="{{ Value }}" disabled>
        <label for="{{ Input id }}" class="form-check-label">{{ Label }}</label>
    </div>
</fieldset>

Special inputs

File input

Code


<div class="form-group">
    <label for="{{ Input id }}">{{ Label }}</label>
    <input id="{{ Input id }}" name="{{ Input name }}" type="file" class="form-control">
</div>

Date and time inputs

Some modern desktop browsers like Chrome and Firefox and mobile browsers like Chrome for Android and Safari for iOS have built-in browser user interfaces for inputs with type="date" and type="time". View details on browser support at caniuse.com. Other browsers, like IE11 and Safari for desktop do not have built-in support.

It is recommended to use a JavaScript polyfill plugin to provide cross-browser support for browsers that do not have these built-in capabilities. Here is a list of example plugins:

Web Experience Toolkit datepicker (used on the Government of Canada website)
jQuery UI datepicker
Bootstrap-datepicker

We currently do not have a recommended plugin for time pickers.

Code


<!-- Example date picker -->
<div class="form-group">
    <label for="{{ Input id }}">{{ Label }}</label>
    <input id="{{ Input id }}" name="{{ Input name }}" type="date" class="form-control">
</div>

<!-- Example time picker -->
<div class="form-group">
    <label for="{{ Input id }}">{{ Label }}</label>
    <input id="{{ Input id }}" name="{{ Input name }}" type="time" class="form-control">
</div>