General guidelines
This component can be used for long and short form entries. You must adapt the size of the text input box to reflect the length of the content you expect the user to enter. Input fields are not just limited to simple forms, they are used for search bars, in filter panels…
The Text Field is mainly used for forms, but also for filtering panels, modals or for searching.
Labels
Effective form labeling helps users understand what information to enter into a text input. Using placeholder text in lieu of a label is sometimes employed as a space-saving method. However, this is not recommended because it hides context and presents accessibility issues.
Accessibility best practices:
- Labels must be visible when an input gets focus.
- Labels must be announced to the screen reader on focus.
- Ensure the helper text that appears under an input is read when an assistive technology user stops at an input using ARIA.
Placeholder text
Placeholder text provides hints or examples of what to enter. Placeholder text disappears after the user begins entering data into the input and should not contain crucial information. Use sentence-style capitalization, and in most cases, write the text as a direct statement without punctuation.
Optional instead of required
Most of the time, all fields are Mandatory except for a couple of fields that are Optional.
Asterisks are not clear for all types of users. A simple solution to avoid such misunderstandings is to mark only the optional fields.
Feedback and additional information
Feedback messages should be placed below the corresponding Input Field. Error messages are in red, success messages are in green.
For additional information, use an icon on top right of the input aligned with the label. The information will be revealed on hover inside a tooltip.
Textarea used the same shared style with the Input field. The component can be resized vertically and horizontally. It’s mostly used to write messages on contact forms.
Character count
Text areas may have a character limit and counter. Use it to let users know how long their entry can be before they begin typing.
Numeric Input gives the user the possibility to increase or decrease a value easily. It’s highly effective when it’s associated with data that will be refreshed automatically each time the user is submitting the button + or -.
Right
Interactive icons should be placed at the right, always. The Button icon variant is used inside the input.
Left
Icons on the left should not be interactive. They act as an indicator, for the behavior of the field.
Visual guidelines
Do's and Don'ts
- Label text shouldn’t take up multiple lines.
- Label text shouldn’t be truncated. Keep it short, clear, and fully visible.
Best Practices
- Choose the shortest and clearest label possible.
- opt for a placeholder with a default value in situations where text entry needs to be made easier.
- opt for a tooltip via the help icon or additional information, if help is needed in finding the text to be entered.
- Always signal a typing error via an error status and an additional field.
- Concisely explain the reason for the error and how to solve it.
- Adapt the text field to the expected value (size and format). The length of the field must afford the length of the answer.
- Allow the user to copy and paste information.
- When the expected value is lengthy, opt for the Text Area element, which adjusts itself to the size of text.
- Clearly indicate if there is a maximum number of characters.
- Validation for email fields.
- Pre-fill/auto-detect as much as you can
Code & Design assets
Request code and design assets for creating user interfaces.
Can I contribute to the System?
Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.