Input fields
Text field
The most basic Text field exists of an outlined input and a top aligned label.
If a text field requires certain data formats (number, e-mail, etc...) it should be declared accordingly in order to make input easier when using a virtual keyboard.
Multi-line Text field
A multi-line Text field can hold several lines of input. The input can be limited to a maximum number of characters if necessary.
Split input fields
In general, best practice is to give all input fields in a form the same length.
In some cases, the length can also vary to be in line with what the length of the expected answer should be.
E.g. an input field for a streetname should be longer, while the input field for the number should be short.
When implementing, please follow these guidelines:
- Short input fields should always be combined with another input field.
- The combination must make sense (e.g. street - nbr or expirationdate - cvc)
- The combined lenght should be equal to a single, full-width input field.
- On smaller screens, these fields will be displayed as full-width input fields, each on its own line
Select field
Use a select field when you want users to make a choice in predefined list.
Required fields / Optional fields
Don't use asterisks (and some kind of legend to explain the asterisk) to indicate required fields. Instead, use a text supplement (e.g. optional) to mark form fields which do not have to be filled out.
Input field with suffix
When a suffix is needed (e.g. € or %), the suffix is placed inside the inputfield on the right side. The necessary padding needs to be adjusted to compensate en prevent input from being displayed at the same location as the suffix.
In-place editable field
When only one (or very few) values need to be editable, an in-place editable field can be used.
Descriptions
When a short description can be usefull to add meaning to the expected input, this description can be added below the input field.
For longer descriptions, it is best to use a tooltip in order not to take up too much space between different inputfields.
States of input fields
Enabled
Disabled
View only
Value
Error
Vertically aligned vs Horizontally aligned forms
All previous recommendations and examples are based on a vertically aligned form. Vertical alignment should always be the first choice, because:
- It has the fastest completion rate because of the easy top-to-bottom reading pattern.
- Its ability to accomodate labels with varying lengths.
For very long forms and when a slower completion rate is not a problem (or even desired because of e.g. sensitive data), a horizontally aligned form can be used.
When choosing this option, the labels should always be right-aligned.
Vertically aligned form and tooltip
Most of the other rules defined for the vertically aligned form also apply to the horizontally aligned form.
The only case that needs a specific approach is the use of a tooltip. As it might occur that a tooltip AND a suffix are needed on the same input, the field needs to have a right margin to provide room for the tooltip. The suffix will still be positioned inside the inputfield.