Form elements

Digital pattern library

Keep forms as simple as possible.

Only ask for the information you absolutely need.
If you do ask for optional information, mark the labels of optional fields with ‘(optional)’.
Don’t mark mandatory fields with asterisks.

Options

Fieldsets and legends
Labels
Hint text
Input fields
File upload
Checkboxes
Radio buttons
Conditionally revealing content
Select boxes

Fieldsets and legends

Use fieldsets to group related form controls. The first element inside a fieldset must be a legend element which describes the group.

Example

Personal details

First name

Last name

Postcode Enter your postcode without any spaces. For example, 'KY169AL'.

Code

<fieldset><legend>Personal details</legend>
	<div class="form-group">
		<label class="control-label" for="firstName">First name</label>
		<input class="form-control" id="firstName" type="text">
	</div>
	<div class="form-group">
		<label class="control-label" for="lastName">Last name</label>
		<input class="form-control" id="lastName" type="text">
	</div>	<div class="form-group">
		<label class="control-label" for="Postcode">Postcode</label>
			<span class="help-block">
				Enter your postcode without any spaces. For example, 'KY169AL'.
		  	</span>
		<input class="form-control" id="postcode" type="text">
	</div></fieldset>

Labels

All form fields must be given labels.
Don’t hide labels, unless the surrounding context makes them unnecessary.
Labels must be aligned above their fields.
Label text should be short, direct and in sentence case.
Avoid colons at the end of labels.
Labels must be associated with form fields using the for attribute.

Example

Name

Code

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

Hint text

Don’t use placeholder text in form fields, as this will disappear once content is entered into the form field. Search fields are the only exception to this, but must have the search icon or text indicating it's usage.
Hint text must sit above a form field.
Ensure hint text can be read correctly by screen readers.

Example

Postcode Enter your postcode without any spaces. For example, 'KY169AL'.

Code

<div class="form-group">
	<label class="control-label" for="Postcode">Postcode</label>
		<span class="help-block">
			Enter your postcode without any spaces. For example, 'KY169AL'.
	  	</span>
	<input class="form-control" id="postcode" type="text">
</div>

Input fields

Ensure that users can enter the information they need at smaller screen sizes.
Snap form fields to 100% width at smaller screen sizes.
Use the .form-group class to create spacing when wrapping label and input pairs.

Default input

Example

First name

Last name

Code

<div class="form-group">
	<label class="control-label" for="firstName">First name</label>
	<input class="form-control" id="firstName" type="text">
</div>
<div class="form-group">
	<label class="control-label" for="lastName">Last name</label>
	<input class="form-control" id="lastName" type="text">
</div>

Input addons

Addons can be used when the input field is always going to be prefixed with a particular value.

Example

Code

<form action="" class="form">
	<div class="form-group">
		<label for="input-addon">Cost</label>
		<div class="input-group">
			<div class="input-group-addon">£</div>
			<input type="text" class="form-control" id="input-addon">
			<div class="input-group-addon">.00</div>
		</div>
	</div>
</form>

Textarea

Allows for multiple lines of text.

Example

Textarea

Code

<div class="form-group">
    <label for="textArea" class="control-label">Textarea</label>
	<textarea class="form-control" rows="3" id="textArea"></textarea>
</div>

File upload

Uses the native input using type="file". This is so:

The control gains focus when tabbing through the page.
The control functions using a keyboard.
The control functions using assistive technology.
The control functions when JavaScript is not available.

Example

Upload a file

Code

<div class="form-group">
	<label class="form-label" for="file-input">Upload a file</label>
	<input type="file" id="file-input">
</div>

Checkboxes

Make it clear with words when users can select one or more multiple options.
Only pre-select options if there’s a strong, user-centred reason to.

Inline checkboxes

Example

Options

Please choose one or more options:

One
Two
Three

Code

<div class="form-group">
    <div class="checkbox-box inline">
    <label>Options</label>
    <p>Please choose one or more options:</p>
        <ul>
            <li>
                <input type="checkbox" value="option1" id="checkbox-inline1">
                <label for="checkbox-inline1">One</label>

                <div class="check glyphicon glyphicon-ok"></div>
            </li>

            <li>
                <input type="checkbox" value="option2" id="checkbox-inline2">
                <label for="checkbox-inline2">Two</label>

                <div class="check glyphicon glyphicon-ok"></div>
            </li>

            <li>
                <input type="checkbox" value="option3" id="checkbox-inline3">
                <label for="checkbox-inline3">Three</label>

                <div class="check glyphicon glyphicon-ok"></div>
            </li>
        </ul>
    </div>
</div>

Stacked checkboxes

Example

Options

Please choose one or more options:

One
Two
Three

Code

<div class="form-group">
    <div class="checkbox-box">
    <label>Options</label>
    <p>Please choose one or more options:</p>
        <ul>
            <li>
                <input type="checkbox" value="option1" id="checkbox-stacked1">
                <label for="checkbox-stacked1">One</label>

                <div class="check glyphicon glyphicon-ok"></div>
            </li>

            <li>
                <input type="checkbox" value="option2" id="checkbox-stacked2">
                <label for="checkbox-stacked2">Two</label>

                <div class="check glyphicon glyphicon-ok"></div>
            </li>

            <li>
                <input type="checkbox" value="option3" id="checkbox-stacked3">
                <label for="checkbox-stacked3">Three</label>

                <div class="check glyphicon glyphicon-ok"></div>
            </li>
        </ul>
    </div>
</div>

Radio buttons

Use these to let users choose a single option from a list.
Radio buttons with large hit areas are easier to select with a mouse or touch devices.

Inline radio buttons

Example

Options

How many fudge donuts would you like?

One
Two
Three

Code

<div class="form-group">
    <div class="radio-button inline">
    <label>Options</label>
    <p>How many fudge donuts would you like?</p>
        <ul>
            <li>
                <input type="radio" id="inline-option1" name="inline-selector">
                <label for="inline-option1">One</label>

                <div class="check"></div>
            </li>

            <li>
                <input type="radio" id="inline-option2" name="inline-selector">
                <label for="inline-option2">Two</label>

                <div class="check"></div>
            </li>

            <li>
                <input type="radio" id="inline-option3" name="inline-selector">
                <label for="inline-option3">Three</label>

                <div class="check"></div>
            </li>
        </ul>
    </div>
</div>

Stacked radio buttons

Example

Options

How many fudge donuts would you like?

One
Two
Three

Code

<div class="form-group">
    <div class="radio-button">
    <label>Options</label>
    <p>How many fudge donuts would you like?</p>
        <ul>
            <li>
                <input type="radio" id="stacked-option1" name="stacked-selector">
                <label for="stacked-option1">One</label>

                <div class="check"></div>
            </li>

            <li>
                <input type="radio" id="stacked-option2" name="stacked-selector">
                <label for="stacked-option2">Two</label>

                <div class="check"></div>
            </li>

            <li>
                <input type="radio" id="stacked-option3" name="stacked-selector">
                <label for="stacked-option3">Three</label>

                <div class="check"></div>
            </li>
        </ul>
    </div>
</div>

Conditionally revealing content

Reveal an additional input field, depending on the value selected.
May only be used alongside radio buttons.
A left border is applied to emphasise this newly revealed information.

Wrap the input you wish to hide with the following code:

<div class="conditional-content" aria-hidden="true">
	[Your hidden input]
</div>

Then use the following JavaScript code to show/hide the conditional content:

$(document).ready(function() {
    $('input.input-name').change(
        function() {
            var val = $(this).val();

            if(val === "option-value") {
                $(".conditional-content").show();
            }
            else if(val !== "option-value") {
                $(".conditional-content").hide();
            }
        }
    );
});

Replace input-name with the class of the input you wish to affect.
Replace option-value with the option you wish to show conditional content on.
(In the below example, this value is set to 'other').

Example

Options

How many fudge donuts would you like?

One
Two
Three
Other

Code

<div class="form-group">
	<div class="radio-button">
    <label>Options</label>
    <p>How many fudge donuts would you like?</p>
	    <ul>
	        <li>
	            <input type="radio" id="stacked-1" class="conditional-radio" name="conditional" value="one">
	            <label for="stacked-1">One</label>

	            <div class="check"></div>
	        </li>
	        <li>
	            <input type="radio" id="stacked-2" class="conditional-radio" name="conditional" value="two">
	            <label for="stacked-2">Two</label>

	            <div class="check"></div>
	        </li>
	        <li>
	            <input type="radio" id="stacked-3" class="conditional-radio" name="conditional" value="three">
	            <label for="stacked-3">Three</label>

	            <div class="check"></div>
	        </li>
	        <li>
	            <input type="radio" id="stacked-4" class="conditional-radio" name="conditional" value="other">
	            <label for="stacked-4">Other</label>

	            <div class="check"></div>
	        </li>
	    </ul>
	</div>
	<div class="conditional-content" aria-hidden="true">
		<label class="control-label" for="name">Other</label>
		<input class="form-control" id="name" type="text">
	</div>
</div>

Select boxes

If possible, avoid using select boxes (drop-down lists). Use radio buttons or checkboxes instead.

Example

Status

Code

<div class="form-group">
	<label class="form-label" for="select-box">Status</label>
	<select class="form-control" id="select-box">
		<option value="">Please select one of the following...</option>
		<option value="ug">Undergraduate</option>
		<option value="pgr">Research postgraduate</option>
		<option value="pgt">Taught postgraduate</option>
	</select>
</div>