Text field

At some point everyone needs to type something in so
we made this text field.

Users can start typing by tapping onto a text field, automatically bringing up a keyboard with the cursor in place. The text input area could be either single line or multi line.

Single line

For single-line text field, text appears automatically on the left and the cursor appears to the right edge of text and scrolls horizontally.
text_input_single
There are two styles of single line text field.

1. Embedded

When it is obvious that the view is entirely or mostly for entering text, apply the “embedded” style of text field for a chromeless feel.

2. Standard

When the intention of the view is mixed use the “standard” style of text field. For
example, there may be multiple entry points, or mixed media such as text and images.

Multi-line

For a multi-line text field, text appears automatically on the left, and content expands
to the next row and scrolls vertically.

text_input_multi

A multi-line text field can either be expanded to a maximum fixed height of rows after
which it scrolls, or unlimited.

Clearing text

To clear content from a text field, there are two options.
clear_text
1. A “clear” icon inside a single line text field.

  • The icon appears after tapping on the text field.
  • It is placed at the opposite ‘trailing’ end from the text being entered (usually the right hand side).
  • Tapping the icon once will empty the text field.

2. The backspace key on the keyboard.

  • Tapping the backspace key will clear one character at a time from the text field.

Note: The clear icon always appears on the right hand side of the text field. Any other icon, for example search progress, should be added on the left hand side.

Text field labels

To label a text field, there are two options.

1. Placeholder text inside a text field

  • Used when there are only one or two text fields in view and there is limited screen space.
  • Visible until the user has started to type.

2. Labels

  • Text fields should be labelled in the same way as you would for most other list items; a label above or to the left of it and if necessary a caption below it.