Input area

by 2 contributors:

This article is in need of a technical review.

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: empty

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

See also

Document Tags and Contributors

Contributors to this page: chrisdavidmills, Sheppy
Last updated by: chrisdavidmills,