We use cookies to collect anonymous data to help us improve your site browsing experience.

Click 'Accept all cookies' to agree to all cookies that collect anonymous data. To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.

Set cookie preferences

Your cookie preferences have been saved. You can change your cookie settings at any time.

Guidance

Form spacing

When creating an effective form, spacing is important. Placing form labels near the associated text field and grouping related fields helps users to complete forms quicker and with less confusion.

The following examples show how the layout of form elements can help users.

Label and field spacing

Make sure that each label and its field are clearly associated with each other and separated from surrounding labels and fields. Equal spacing makes it unclear which label relates to which field. This may cause incorrect user inputs.

This can be avoided by the proper use of spacing so that the user can quickly identify which label relates to which field.

A form with equal spacing between field labels, text inputs and the pairs of labels and inputs that follow them. The equal spacing is also demonstrated with an illustrated scale to the side of the form.
When there are several inputs equal spacing makes it unclear which label relates to which field.
A form with wider spacing between pairs of labels and text inputs than the space between a label and its associated text input. The wider spacing is also demonstrated with an illustrated scale to the side of the form.
Labels should be closer to their associated field and have clear spacing from other fields.

Group spacing

Just as with field and label spacing, it is important to separate groups of inputs. Uniform or not enough spacing between groups can make it difficult for to understand the form’s structure.

A form with the same spacing between groups of form fields as the spacing between form fields within a group. The equal spacing is also demonstrated with an illustrated scale to the side of the form.
Unclear spacing between grouped fields makes it difficult to understand the form structure.
A form with wider spacing between groups of form fields than the spacing between form fields within a group. The wider spacing is also demonstrated with an illustrated scale to the side of the form.
Make sure there is enough space between grouped fields to help users quickly understand the form structure.

Component spacing

Make sure each part of the form is discinct and easy to scan for the user.

A form with a narrow gap between some radio button inputs and a 'next' button. The small gap is called out with a ruler between the fields and the button.
Here the primary action button is closer to the second radio button than the radio buttons are to each other.
A form with a wide gap between some radio button inputs and a 'next' button. The wide gap is called out with a ruler between the fields and the button.
Enough spacing between components makes the structure clear.

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top