Forms
A form is a collection of inputs that are thoughtfully constructed to enable users to input and select information effectively.
To create a successful form you need to consider using the correct structure, interface elements, labels and interactions. We will outline guidelines for these below.
Form Anatomy
There are many different UI elements to choose for your form, including; input fields, checkboxes, radio buttons, date pickers, buttons.
Guidelines
Forms are used to get multiple pieces of information. For this, we need to be specific with what information we require to guide the user in completing the form. Outside of choosing the right UI elements for this, we need to ensure they are labeled properly - and if necessary include placeholder and descriptions.
Labels
Labels should always be present and clear to what is required from the user.
| Type | Visual | Usage | Example |
|---|---|---|---|
| Text input |  | To allow users to input a single line of text | First and last name inputs, email addresses, etc |
| Selection |  | Select information from a pre-defined selection of inputs various different types of components. Use this for 5 or more options | Choosing start and end dates (and times), selecting options from a dropdown |
| Selection controls (single) |  | When using a checkbox to allow the user to confirm a simple statement | "I understand that this will permanently change name's contract" |
| Selection controls (multiple) |  | If there are multiple selections that require controls under the same label (think of this as an open dropdown component) - use this instead of a dropdown with 4 or less options that may require further descriptions | Right to work status; Settled, Pre-settled, Not declared |
| Selection control (switch) |  | when you require a user to turn a feature on (which result in an action or further inputs being available) | Include terminated absences |
Input fields can have two types of labels (Top aligned and left aligned). This alignment can change depending on if you are looking to slow, or speed the user up when navigating your form. You must ensure that you do not mix these alignments in the same form.
Top-aligned labels
Top-aligned labels form an 'F pattern', following the path of a users eyes looking at the form. There is less visual distance between a label and its input with it stacked on top of it's own input.
Side-aligned labels
Side aligned labels form a 'Z pattern', following the path of a users eyes looking at the form. There is more visual distance and using more negative space to have the input alongside the label.
there are advantages and disadvantages to both of these label layouts. Typically top aligned forms are easier for a user to quickly fill in common pieces of information, whereas a side aligned allows users to quick scan the labels for a specific piece of information they may be required to change.
Consider both of these layouts when designing your form, is your form information gathering that is completed once as part of an action (absence booking, adjustment requests etc), or is this a form that will be revisited and changed over time (employee profile, contract details).\
Platform considerations
For mobile: ensure that all forms are using top-aligned labels, you have minimal horizontal width to accommodate for left-aligned labels. If you are worrying about the vertical space your form is taking on mobile, consider breaking your form into sections (see below).
Placeholder text
Placeholders serve as a secondary visual indicator and shouldn't replace a visible label for an input in a form. Use placeholder text as an example of the format required inside the field, eg DD/MM/YYY. Alternatively, use placeholder text as instructions for using the component or a prompt to what can be selected, eg 'Type here' in input fields and 'Select one' for select dropdowns.
Always ensure placeholder passes accessibility requirements for contrast and screen readers.
Description
Labels should always be present and clear to what is required from the user.