Draft
This page is not complete.
An input area is a data entry field. There are many variations on what an input area can look like; they can be as simple as a text entry field, and as complex as a multi-part entry field with text entry, value selectors, and buttons.
Characteristics
Details coming soon.
Visuals
Here you can see an assortment of input areas, suggesting a number of ways they can look.
Generic inputs
These are simple text entry boxes.
Generic input: empty
Here's a simple input box with no text in it; all you see inside is the placeholder text. |
Generic input: filled
Here, the generic input has some text entered into it. Note the presence of the "clear" button at the right end of the input field. |
Inputs at the top of the view
These inputs are located at the top of the view (either at the very top of the screen, or immediately under a header).
Top: emptyHere is a text entry field at the top of a page; this should be used under a header. |
Top: active
This text entry field from the top of a view is active; it has an active "Cancel" button next to it, and the "clear" button in the input field is visible. This style of input should be used without a header. Note: This needs further explaining; how is this different from the "empty" form in terms of header usage? |
Inputs at the bottom of the view
These input areas are located at the bottom of the view.
Empty text input box
This input area at the bottom of a view includes a "Send" button (it's from an SMS app). Note that the "Send" button is disabled since the input is empty. |
Filled text input box
Now the bottom input box has some text in it, and the "Send" button is enabled. |
Multi-line text input box
As the amount of text entered by the user grows, the input area at the bottom of a view expands upward to make room for more content, as seen here. |
Simple fieldsets
These fieldsets include a combination of a value selector and a text input box. In this example, the value selector button is used to open a selector to choose the type of contact in a contacts app (work, home, etc), and the text input box is used to enter the corresponding email address.
Empty
Here, the text input box is empty, showing only the placeholder text. |
With text entered
Here, the user has entered an email address. There is a delete button next to the field, in this case, to allow deleting this email address from the contact record.
|
With the value selector button pressed
Here, the user has pressed the value selector button; when they let go of the screen, the value selector will open to let them choose the contact type. |
Disabled, with undo button
Here, the input area is disabled, but has an undo button. Note: Need to explain the use case for this. |
Complex fieldsets
More complex fieldsets may include multiple text input fields, value selector buttons, and regular buttons.
With content entered
Here, we have an input area for which multiple text input values are associated with the "Home" category: a phone number, and a name. A button is included to add an address for this category.
|
Disabled, with undo button
In this example, the input area is disabled, and has an undo button. Note: Need to explain the use case for this.
|
Interaction
Here, you can see a series of interactions used to create a new calendar entry.
