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:
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.
Do's and Don'ts
Best Practices
Request code and design assets for creating user interfaces.
Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.