Text fields
A text field* lets users enter, interact and edit content, typically in forms and dialogs.
Guidelines
Text fields are used for long and short amounts of text. Text inputs are for a single line of text while Text areas are for more than a single line of text.
The component includes options for writing unit for the field and a placeholder icon. This component uses auto layout to place icon and/or unit with the right spacing next to each other.
Don’t
- Do not remove the label.
- Do not use placeholder text instead of the label.
- Do not use as search.
- Do not end placeholder text with a period for inputs.
Variations
Label
A label text is always required, and helps users know what information is expected from this field. The label can either be above (as it is built into the component in Figma), or to the left of the field (done by hiding the built-in label in Figma and adding a new label to the left).
Meta
Character count and required or optional labels can go in meta grouping. Do not assume that all users know what an ”*” means, use *Required* as the meta.
Placeholder text
Placeholder text should provide hints or examples of what text to enter. For wording, use “e.g. Stavanger” and not “Name your town”. For numbers, use “9-digit number” and not “Example: 123-456-789”. Placeholder text disappears after the user begins to type, so it should not contain critical information. Also, not all screen readers are capable of reading placeholder text. If the user does not type within the field, the placeholder text reappears in the field.
Input text
For input text containing numbers only, use the style Input/Text monospaced for better readability. For example for phone numbers, values etc.
Validation and errors
An error or warning must always have helper text with an icon or an icon in the field. Use real-time validation to help streamline the process and make the user experience smoother. Wait to validate until the user has finished interacting with the field.
Validation helper text should use a passive tone as not to blame the users. For wording, use “Platform name required” and not “You did not enter a platform name”.
Unit
Units in text fields are optional. Units should be used to explain the unit of the relevant text field, and be abbreviated if a standard unit is used.
Icon
Icons in text fields are optional. Icons can be very helpful in expressing extra functionality, input methods or indicating validation.
- Valid, error or warning
- Clear
- Voice input
- Dropdown
- Loading
Helper text
Help text is always visible to assist the users and should not be hidden behind a tooltip.
Examples
Input
Area
