Input Fields
Input fields let users enter and edit text.
Table of Contents
Edit this section, Opens in new windowOverview
Input fields enable the user to interact with and input content.
Usage
Sizing
There are instances, sometimes in the same form, where you need users to enter both short and long form content. Allow the size of the text input box to reflect the length of the content you expect the user to enter.
Types
Here is examples on how the different input types look like. For more information on the different types, please see the MDN documentation.
With icons
Behaviours
Operational states
Interactions
Focus
Modifiers
Disabled
Required
Input fields marked required get the asterix by default.
Optional
Reset
Anatomy
- Placeholder text (optional)
- Text label
- Helper text aligned with the input field text (optional)
- Validation error text aligned with the input field text (optional)
- Leading icon inside (optional)
- Help button (optional)
- Trailing icon inside (optional)
On backgrounds
B1
B3
B4
Field length
You can vary the length of the input field. For optimal usability, use a size that corresponds with the type/amount of characters in the text-field. For example, the field for a postal code containing a maximum of 5 characters should be a small input field.
- Largest
- Larger
- Large
- Medium
- Small
- Smaller
- Smallest
Help text
Use this element when you want to convey more helpfull information for the current input field. For more information about this, please read the Form Guidelines.
- Input help
Do not use too long help texts. Be short and concise, preferrably no more than two lines.
Display text that is usefull to the user.
Default values
Where possible, add programmatic assistance. Detect and pre-fill inputs to reduce errors and save time. When the software can't determine the value that belongs in an input, use type-ahead to make suggestions. Use sentence-case for default values, detected values, and auto-completion text.
Validation and errors
Real time validation helps to streamline the process and keep data clean when the user is filling out forms. For full guidelines, refer to the Forms documentation.
- Input error
Use this element when the input field is invalid, and you want to relay a short concise error text to the user. For more information about this, you can read the Form Guidelines.
Do not use too long error texts. Be short and concise, preferrably no more than two lines.
Business rules is not suitable for validation.
Do not display text that is not meant for the user. The user cannot act on this message.
Display text that is usefull to the user.