Form elements Example: Form elements

The examples below show the spacing between form labels, hint text and error messages

There should be 10px under the label or legend and the input

This is the label text in bold

There should be 10px under the label or legend and the input (when hint text is shown)

This is hint text
This is the label text in bold This is hint text
This is the label text in bold This is hint text

There should be 10px under the label or legend and the input (when an error message is shown) and 15px above the error message.

This is hint text Error message goes here
Do you have a National Insurance number? This is hint text Error message goes here
Date of birth For example, 31 3 1980 Error message goes here
Date of birth For example, 31 3 1980 Error message goes here
Date of birth For example, 31 3 1980 Error message goes here

These examples show legend text styled to look like a label

Do you already have a personal user account?
This is the label text This is the hint text

Example: input type="text" and error

Error message goes here
Error message goes here
This is hint text
This is hint text Error message goes here

Example: input text with form-control classes

Example: textarea and error

Error message goes here
Error message goes here
This is hint text
This is hint text Error message goes here

Example: select boxes and error

Error message goes here
Error message goes here
This the hint text
This is the hint text Error message goes here
Error message goes here

These examples are one-question-per-page examples and use a heading for the question inside the legend of the fieldset.

Where do you live?

or

Which types of waste do you transport regularly?

Select all that apply

Do you already have a personal user account?

Do you yes/no?

How do you want to be contacted?

Your income

How often do you get paid? Choose an answer

Your income

How often do you get paid?

What is your nationality?

Select all options that are relevant to you.