Form components

Form controls

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

Code


<form>
    <div class="form-group">
        <label for="ex-text-1">Example text input</label>
        <input id="ex-text-1" name="ex-text-1" type="text" class="form-control">
    </div>
    <div class="form-group">
        <label for="ex-text-2">Example select</label>
        <select id="ex-text-2" name="ex-text-2" class="form-control">
            <option value="1">Example option 1</option>
            <option value="2">Example option 2</option>
            <option value="3">Example option 3</option>
            <option value="4">Example option 4</option>
            <option value="5">Example option 5</option>
        </select>
    </div>
    <div class="form-group">
        <label for="ex-text-3">Example multiple select</label>
        <select id="ex-text-3" name="ex-text-3" 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>
            <option value="4">Example option 4</option>
            <option value="5">Example option 5</option>
        </select>
    </div>
    <div class="form-group">
        <label for="ex-text-4">Example textarea</label>
        <textarea id="ex-text-4" name="ex-text-4" class="form-control" rows="3"></textarea>
    </div>
</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.


<div class="form-group">
    <label for="ex-read-2">Example readonly plain text input</label>
    <input id="ex-read-2" name="ex-read-2" type="text" class="form-control-plaintext" value="The value for this input is displayed as readonly plain text" readonly>
</div>

Disabled

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


<div class="form-group">
    <label for="ex-disabled">Example disabled text input</label>
    <input id="ex-disabled" name="ex-disabled" type="text" class="form-control" value="This input is disabled" disabled>
</div>

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


<fieldset class="form-group">
    <legend>Example stacked checkboxes</legend>
    <div class="form-check">
        <input id="ex-check-1" name="ex-check" type="checkbox" class="form-check-input" value="apples">
        <label for="ex-check-1" class="form-check-label">Apple</label>
    </div>
    <div class="form-check">
        <input id="ex-check-2" name="ex-check" type="checkbox" class="form-check-input" value="bananas">
        <label for="ex-check-2" class="form-check-label">Banana</label>
    </div>
    <div class="form-check">
        <input id="ex-check-3" name="ex-check" type="checkbox" class="form-check-input" value="oranges" disabled>
        <label for="ex-check-3" class="form-check-label">Orange (disabled example)</label>
    </div>
</fieldset>

<fieldset class="form-group bordered">
    <legend>Example stacked radios with a bordered fieldset</legend>
    <div class="form-check">
        <input id="ex-radio-1" name="ex-radio" type="radio" class="form-check-input" value="red">
        <label for="ex-radio-1" class="form-check-label">Red</label>
    </div>
    <div class="form-check">
        <input id="ex-radio-2" name="ex-radio" type="radio" class="form-check-input" value="green">
        <label for="ex-radio-2" class="form-check-label">Green</label>
    </div>
    <div class="form-check">
        <input id="ex-radio-3" name="ex-radio" type="radio" class="form-check-input" value="blue" disabled>
        <label for="ex-radio-3" class="form-check-label">Blue (disabled example)</label>
    </div>
</fieldset>

Inline

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

Code


<fieldset class="form-group">
    <legend>Example inline checkboxes</legend>
    <div class="form-check form-check-inline">
        <input id="ex-check-inline-1" name="ex-check-inline" type="checkbox" class="form-check-input" value="apple">
        <label for="ex-check-inline-1" class="form-check-label">Apple</label>
    </div>
    <div class="form-check form-check-inline">
        <input id="ex-check-inline-2" name="ex-check-inline" type="checkbox" class="form-check-input" value="banana">
        <label for="ex-check-inline-2" class="form-check-label">Banana</label>
    </div>
    <div class="form-check form-check-inline">
        <input id="ex-check-inline-3" name="ex-check-inline" type="checkbox" class="form-check-input" value="orange" disabled>
        <label for="ex-check-inline-3" class="form-check-label">Orange (disabled example)</label>
    </div>
</fieldset>

<fieldset class="form-group bordered">
    <legend>Example inline radios with a bordered fieldset</legend>
    <div class="form-check form-check-inline">
        <input id="ex-radio-inline-1" name="ex-radio-inline" type="radio" class="form-check-input" value="red">
        <label for="ex-radio-inline-1" class="form-check-label">Red</label>
    </div>
    <div class="form-check form-check-inline">
        <input id="ex-radio-inline-2" name="ex-radio-inline" type="radio" class="form-check-input" value="green">
        <label for="ex-radio-inline-2" class="form-check-label">Green</label>
    </div>
    <div class="form-check form-check-inline">
        <input id="ex-radio-inline-3" name="ex-radio-inline" type="radio" class="form-check-input" value="blue" disabled>
        <label for="ex-radio-inline-3" class="form-check-label">Blue (disabled example)</label>
    </div>
</fieldset>

Special inputs

File input


<div class="form-group">
    <label for="ex-file">Example file input</label>
    <input id="ex-file" name="ex-file" 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.


<div class="form-group">
    <label for="ex-date-picker">Example date picker</label>
    <input id="ex-date-picker" name="ex-date-picker" type="date" class="form-control input-width-md">
</div>

<div class="form-group">
    <label for="ex-time-picker">Example time picker</label>
    <input id="ex-time-picker" name="ex-time-picker" type="time" class="form-control input-width-sm">
</div>

Information This site is moving

Note

Form controls

Code

Readonly

Disabled

Checkboxes and radios

Stacked

Code

Inline

Code

Special inputs

File input

Date and time inputs