Text inputs and textarea
Text inputs allow users to input text or select text via auto-complete or dropdown.
Using text inputs
Through text input fields users can input text, numbers, symbols or mixed-format strings (unless specifically restricted). Text inputs can be single line or as textarea multiple line inputs.
Text inputs should be used in forms when a user’s answer to a prompt can not easily be predicted, or when there is significant variability in potential inputs. Text inputs should also be used when other form components prove more difficult (require additional steps) to achieve the same result (e.g. selecting a date from a calendar versus typing in the date). The Search type of text inputs is also prominently used for search queries.
When possible provide auto complete options that are tailored to the input field, such as a list of common responses or relevant search results.
Text input labels communicate what input is requested in the text box. Labels are obligatory for input fields and should only be visibly hidden, but still accessible for screen readers in exceptional cases.
Placeholder text (optional)
Placeholder text provides an example of what type of information is being requested in the input box. Placeholder text should further illustrate and support the text input field label, however they should never be the only input description. Use Base30 for it.
Icons can add to simple identification of specific user inputs. Examples are 'search' magnifying glass for search bars or 'user avatar' for user login input fields.
Indicator icons are used in two contexts with inputs:
- Showing that a user input is required with a 'required' indicator
- Clearing the input, like in search inputs with a 'clear' indicator
The length (width and number of lines) provides a hint to users as to the expected length of their input. Textareas should be used when the input length is multiple sentences long, whereas shorter responses like a search query or password have to be limited to a single line.
Inline error messages and form validation (optional)
When possible, place messages inline with where the error occurred and explain to users what caused the error and, or how it can be fixed. Utilize appropriate colors for different message types (Green50 for successful or Red50 for erroneous). Inline messages should only be shown after a user has clicked into or interacted with the corresponding field.
A single line text input field.
A multi-line text input field.
A single line text input with optional auto-complete or dropdown and a 'search' icon as quick lookup helper.
Password inputs automatically protect the user's input to visual hacking.