This article describes the implementation and possible interactions with the input-area. An input area is a data entry field.
Notes
Input areas can be as simple as a text only entry field (A), and as complex as a multipart entry field with text entry, value selections, and buttons (B).
When text input exceeds a single line in a multi-line input area, the input field will automatically expand to accommodate the amount of text (C).
Interaction — basic input areas
User taps on an input area.
The keyboard shows up and the selected input field is pushed up just above the keyboard. To enter text the user types on the keyboard and the text shows in the input area.
When text exceeds the available width of the single line input area the text is pushed to the left so the user can see the cursor. The user scrolls the text field to view previously input text by dragging the field with their finger.
When the field contains text, a clear button appears within the highlighted input field the user can tap the clear button to remove all data from the input area. User taps clear button.
The input field has been cleared.
Interaction — multi-line input areas
User enters message within input area.
The user types until the text exceeds a single line.
The input field automatically expands to accommodate the text in a multi line input area.
If the text exceeds the maximum height, the input area becomes scrollable.
