Text inputs and textarea

Text inputs allow users to input text or select text via optional autocomplete or dropdown menu.

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 the 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 autocomplete options that are tailored to the input field, such as a list of common responses or relevant search results.

Designing

Label
Text input labels communicate what input is requested in the text box. Labels are obligatory for input fields and should only be visually 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.

Icon
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 icon
Indicator icons are used in two contexts with inputs:

Showing that the user's 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 the user has clicked into or interacted with the corresponding field.

See WikimediaUI Figma text inputs and textarea component.