Components

Text inputs and textarea

Text inputs allow users to input text or select text via auto-complete or dropdown.

text input field

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.

Designing

text input field design properties

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

Icon
Icons can add to simple identification of specific user inputs. Examples are 'search' search icon magnifying glass for search bars or 'user avatar' user icon for user login input fields.

Indicator icon
Indicator icons are used in two contexts with inputs:

  • Showing that a user input is required with a 'required' required indicator indicator
  • Clearing the input, like in search inputs with a 'clear' clear indicator 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.

States

text input field visual design and states

Types

Text input

A single line text input field.

Textarea

textarea visual design and states

A multi-line text input field.

Search inputs

search input field visual design and states

A single line text input with optional auto-complete or dropdown and a 'search' icon as quick lookup helper.

Number inputs

number input field visual design and states

See Entry > Number inputs page for details.

Password inputs

password input field visual design and states

Password inputs automatically protect the user's input to visual hacking.

Coding

See OOUI's demos section of text inputs, textareas, search inputs and number inputs.