Form elements

Digital pattern library

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

You must only ask for the information you absolutely need.
You may ask for optional information, if so you must mark the labels of optional fields with ‘(optional)’.
You must not mark mandatory fields with asterisks.
You must not use forms in sidebars.

Checkboxes

Clearly label when users can select one or more options.
Only pre-select options for the user if there’s a strong, user-centred reason to do this.
The label must be clickable.

Inline checkboxes

Example

Options

Please choose one or more options:

One
Two
Three

Code


    
    Options
    Please choose one or more options:
        
            
                
                One

                
            

            
                
                Two

                
            

            
                
                Three

Stacked checkboxes

Example

Options

Please choose one or more options:

One
Two
Three

Code


    
    Options
    Please choose one or more options:
        
            
                
                One

                
            

            
                
                Two

                
            

            
                
                Three

Conditionally revealing content

You may reveal an additional input field, depending on the radio button selected.
This must only be used with radio buttons or select boxes.
You must apply a left border to emphasise this newly revealed information.

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


	//Your hidden input

Use the following JavaScript code to show and hide the conditional content. Place this code at the bottom of the page, for example after the link to core.js:

$(document).ready(function() {
    $('.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 radio buttons or select box that 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').

Radio buttons

Example

Options

How many fudge doughnuts would you like?

One
Two
Three
Other

Code


	
    Options
    How many fudge doughnuts would you like?
	    
	        
	            
	            One

	            
	        
	        
	            
	            Two

	            
	        
	        
	            
	            Three

	            
	        
	        
	            
	            Other

	            
	        
	    
	
	
		Other

Select boxes

Example

Status

Please select your student status.

Code


	Status
	Please select your student status.
	
	
		Other

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.

Example

Personal details

First name

Last name

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

Code

Personal details
	
		First name
		
	
	
		Last name
		
	
	
		Postcode
			
				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:

using the keyboard
using assistive technology
JavaScript is not available

Example

Upload a file

Code


	Upload a file

Hint text

You must not 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 rule, but they must have a search icon or text indicating its usage.
Hint text must sit above a form field.
You must ensure hint text can be read correctly by screen readers.

Example

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

Code


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

Input fields

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

Default input

Example

First name

Last name

Code


	First name
	


	Last name

Input addons

Addons map 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.

Example

Cost

.00

Please enter your username

@st-andrews.ac.uk

Code

	
	Cost 
     
		£ 
		 
		.00 
     


	Please enter your username
	 
	  	 
	  	@st-andrews.ac.uk

Textarea

Allows for multiple lines of text.

Example

Textarea

Code


    Textarea

Labels

All form fields must be given labels.
You must not hide labels unless the surrounding context makes them unnecessary.
Labels must be aligned above input fields.
Labels must be positioned to the right of checkboxes and radio buttons.
Label text must be short, direct and in sentence case.
You must not use colons at the end of labels.
Labels must be associated with form fields using the for attribute.

Example

Name

Code


	Name

Optional fields

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

Example

Postcode (optional)

Code


	Postcode (optional)

Radio buttons

These let users choose a single option from a list.

You must use a select-box if you have more than 10 radio buttons.
Radio buttons with large hit areas are easier to select with a mouse or touch devices.
You must only pre-select options for the user if there’s a strong, user-centred reason to do this.
The label must be clickable.

Inline radio buttons

Example

Options

How many fudge doughnuts would you like?

One
Two
Three

Code


    
    Options
    How many fudge doughnuts would you like?
        
            
                
                One

                
            

            
                
                Two

                
            

            
                
                Three

Stacked radio buttons

Example

Options

How many fudge doughnuts would you like?

One
Two
Three

Code


    
    Options
    How many fudge doughnuts would you like?
        
            
                
                One

                
            

            
                
                Two

                
            

            
                
                Three

Select boxes

You should avoid using select boxes (drop-down lists), instead you should use radio buttons or checkboxes.
You must only pre-select options for the user if there’s a strong, user-centred reason to do this.

Example

Status

Please select your student status.

Code


	Status
	Please select your student status.

Submit and reset buttons

You must keep text short and use a verb such as 'submit' or 'continue'.
You must not add a reset button. See the Neilsen Norman Group article on reset and cancel buttons for more information.

Example

Code