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

Personal details
	
		First name
		
	
	
		Last name
		
	
	
		Postcode
			
				Enter your postcode without any spaces. For example, 'KY169AL'.

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


	Name

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


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

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


	First name
	


	Last name

Input addons

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

Example

Code


	
		Cost
		
			£
			
			.00

Textarea

Allows for multiple lines of text.

Example

Textarea

Code


    Textarea

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


	Upload a file

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


    
    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

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


    
    Options
    How many fudge donuts would you like?
        
            
                
                One

                
            

            
                
                Two

                
            

            
                
                Three

Stacked radio buttons

Example

Options

How many fudge donuts would you like?

One
Two
Three

Code


    
    Options
    How many fudge donuts would you like?
        
            
                
                One

                
            

            
                
                Two

                
            

            
                
                Three

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:


	[Your hidden input]

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


	
    Options
    How many fudge donuts would you like?
	    
	        
	            
	            One

	            
	        
	        
	            
	            Two

	            
	        
	        
	            
	            Three

	            
	        
	        
	            
	            Other

	            
	        
	    
	
	
		Other

Select boxes

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

Example

Status

Code


	Status