Input Field
Offers users a simple input for a form.
Structure
- Label: Provides a clear description of what users should fill in;
- Placeholder: Provides additional help for expected values;
- Prefix: Optionally adds icon to improve clarity.
- Suffix: Optionally adds icon or text context for expected values.
Input field
Guidelines
When to use
- To gather basic information from users.
- To specify what kind of data users can enter.
When not to use
- You have multiple related fields—use an input group.
- You want longer responses from users (such as feedback)—use a text area.
- You want users to upload a file—use an input file.
Behaviour
Set input mode
Setting the proper input mode for the field (such as number, email address) helps make it clear what’s expected. It also displays the correct keyboard on mobile devices, making it easier for users to complete the field.
Content
Use labels
Labels serve to clearly present what’s expected. They’re especially important for people who don’t see other visual cues. But they also help everyone know exactly what to enter.
For the label, use short descriptive phrases, ideally nouns that make the request clear. See our vocabulary document on confluence for some examples.
Use error and help messages
For more complicated fields, sometimes labels aren’t enough. You want to include any necessary information as clear as possible to help users complete the fields.
Use help messages to guide users before they enter anything and clear calm error messages when there’s a problem with what they entered.
Remember that such messages are likely to invoke negative feelings, so be positive and focused on solutions to any problems.
Email address not valid
Error and help messages
Include placeholder examples
When you have additional information or helpful examples, include placeholder text to help users along.
Remember that placeholder text is visually less important, low in contrast, and disappears once users enter anything. So do not include anything necessary to complete the field.
Placeholder example
Accessibility
- Always ensure that the input field can accept keyboard input, the input field can be focused, activated, and modified using the keyboard alone.
- Ensure that the input field has a visible focus indicator, in this case a highlighted border with the brand colour #3DB0F7. Input fields should be focused on click, or when navigating to it with the keyboard.
- Error handling: provide clear communication when there is incorrect an input, this takes place in the form of a red highlighted border.