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.
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 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.