Digital pattern library

Form elements

Keep forms as simple as possible, see form example for more information.

Rules for form elements

Options available


Checkboxes inline

Please choose one or more options:

Code

Please choose one or more options:


Checkboxes stacked

Please choose one or more options:

Code

Please choose one or more options:


Date picker

Use date picker for inputting date elements.

Code

Fieldsets and legends

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

Personal details
Enter your postcode without any spaces. For example, KY169AL.
Code
Personal details
Enter your postcode without any spaces. For example, KY169AL.

File upload

This element uses the native input: type='file'. This is so the element gains focus when tabbing through the page. It also ensures the element functions when:

Code

Hint text

Enter your postcode without any spaces. For example, KY16 9AL.
Code
Enter your postcode without any spaces. For example, KY16 9AL.

Input addons

Addons may be used when the input field is always going to be prefixed with a particular value, for example collecting only the username for an @st-andrews.ac.uk email address.

£
.00
@st-andrews.ac.uk
Code
£
.00
@st-andrews.ac.uk

Input fields

You must use the .form-group class to create spacing when wrapping label and input pairs.

Code

Labels

Code

Optional fields

If you do ask for optional information, you must mark the labels of optional fields with (optional).

Code

Radio buttons inline

These let users choose a single option from a list.

How many fudge doughnuts would you like?

Code

How many fudge doughnuts would you like?


Radio buttons stacked

These let users choose a single option from a list.

How many fudge doughnuts would you like?

Code

How many fudge doughnuts would you like?


Radio buttons stacked with conditional

You may reveal an additional input field, depending on the radio button selected.

How many fudge doughnuts would you like?

Code

How many fudge doughnuts would you like?


Select box

Please select your student status.

Code

Please select your student status.


Select box with conditional

You may reveal an additional input field, depending on the option selected.

Please select your student status.

Code

Please select your student status.


Submit buttons

Code

Textarea

Allows for multiple lines of text.

Code

Textarea with input limit counter

Code