# Input field

# Description

Allows users to enter information into a user interface. They typically appear as part of a form when combined. They are used to make sure input field designs provide a clear affordance for interaction, making the fields easily identifiable in user interface layouts, efficient to fill in, and accessible.

# Must include:

• Input label
• Field

# Optional

Helper text

# Rules

• Labels for input fields should be clear and succinct.
• Provide the right type of the input field for requested information as this will help users enter in the right format and avoid mistakes.
• Labels should always be located above the input field (top-aligned) to aid readability.
• Avoid ambiguous spacing where labels are equidistant from multiple input fields, so user knows which label belongs to each input field.
• Reduce the number of fields where possible to reduce cognitive load.
• Indicate errors through clear visual cues - red for text and field + bold font for error text, to ensure users know exactly where they have made an error and correct information to input.
• Explain input or formatting requirements if a field requires a specific type of input.
• Avoid using placeholder text inside the field as this could confuse the user, and place text advising user what to input underneath the title of field.
• Indicate where a field is optional, rather than where it is required. There are far less optional fields so this will result in less visual clutter and removes the use or asterisks which are not clear to some users.

# To consider

• Consider the affordance of vertical space to facilitate top-aligned input fields.
• Length of the input field should match the information the user is expected to input to give the clearest indication of what is required.
• Input areas should be utilised for larger amounts of information where multiple lines may be required.
• Avoid using long forms and instead consider chunking input fields into separate groups to avoid mistakes as well as making user interface more perceivable.
• Auto-formatting input fields based on what is required, such as credit card information and phone numbers.