Sizing
Text Fields are flexible containers - they can adapt in width to different screen sizes or specific contexts. Text fields have a fixed height.
On the smaller screens (the smallest viewport range for web or mobile apps) input fields generally occupy the full width of the container (with exceptions in case two fields form a horizontally stacked group).
On larger screens a maximum width applies. Adjust it accordingly to make sure there is enough room for the expected input and to provide the best reading experience.
- Full-width sizing on small screens or within contained elements
- A Text Field should have a maximum width to optimise for expected input and readability
- In some specific cases a text field can form a group with another text field or select. In this case, a combination of fixed width fields and full width fields could apply. The entire group itself it set to a maximum width
Spacing
Spacing is crucial for readable forms. Make sure to apply consistent spacing to provide the best experience. Though the spacing between individual fields is set by the consumer of the component, try to follow these guidelines as much as possible.
The spacing between individual vertically stacked fields should be set to 24px. The spacing between individual horizontally stacked fields should be set at 16px.
Layout and order
In general, a form field layout runs vertically from top to bottom using a single column layout as much as possible. A single-column layout allows users to easily move from one field to the other as they scroll down the screen, making the form easy to read and enables the user to fill out the form quickly. Only in specific situations, take short forms such as flight search, a multi-column layout could apply for larger viewports.
If you have the feeling that your form becomes too long, please check if all fields are necessary to have and/ or if some fields could form a logical horizontal grouping.
In terms of individual field order, try to start with the easy ones first before asking more complex information from the user. In that way, the user gets an immediate feeling of progression and is more likely to complete the form.
Error handling
When the input is invalid, or a required text field or text area has not been filled in, an error is displayed right below the field it applies to. Try to stick to this as much as possible, opposed to other ways of handling errors, as it makes the error easy to locate and users can see the message and instructions while fixing it.
In terms of timing, strive for inline validation as much as possible. This makes the error easier for a user to spot and correct. Do not validate a field before the input is complete - the user should have the opportunity to finish typing first. Of course, there will be situations where inline validation won’t be possible and data entered by the user will need to be sent to a server for verification.
In situation with multiple errors a notification may be used to let users know that there are errors that need to be fixed, whether those errors are in the viewport or below the fold. This can give the user a global understanding of the errors and forces them to look for them. In a scenario like this, never use a notification only but combine them with error states for the individual fields. However, It is not always necessary to add the notification - for example for short forms.
Assistive elements
Hint text
The hint text is displayed right below the label. It is an assistive text that can provide important additional help or context. It is often used to explain the data format in order to fill out the field correctly.
Placeholder text
An optional placeholder text provides a hint or example for the input. It disappears after the users enters the data. It should not be used to replace the text field label but only serves as an additional way to assist. It should never contain important information.
There is a difference between a hint text and a placeholder text. A hint text contains information or guidance that might be crucial to fill in the form correctly. It is important that it stays there when the user fills out the text field. A placeholder provides an easy, non crucial, hint or example for the input.
Required vs optional
A form often contains both required and optional fields. A user should be aware of what information is required or optional while felling out the form. This prevents errors and keeps the user in a continuous flow. To do so, we mark the fields that are optional as most situations require mostly required information in order to proceed.
Accessibility considerations
Text fields require a label, either visual or screenreader-only through ARIA.
Error prevention for text fields includes various components, including indicating desired format in either the label or placeholder text, using more than one method (screen reader indicators, color, etc.) to indicate error state, etc. and requires a separate disscussion to fully cover.