Firefox OS Input Areas

Basics

Input areas are presented in different formats depending on the context. When an input area affects the entire screen it is placed just below the header to show the proper hierarchy. An example of this is the search field, which appears within a variety of apps. Also, directly related input areas can be grouped together creating a larger element known as a group form filed. Forms are not required to be in groups, they can also exist individually as a single form field.

Input Text Areas

Input text areas are placed above the keyboard in its active state.

Text Area Idle (Disabled)
Text Area Idle (Active)
Text Area (Expanded)

The expanded text area makes the most of any available space without overlapping actionable elements. Once the maximum size is reached, the text will scroll behind these elements.

Search Areas

Search areas are background sensitive and have been designed for implementation with both light and dark apps. They are placed just below the header.

Search Area (Idle - Light)
Search Area (Normal - Light)
Search Area (Idle - Dark)
Search Area (Normal - Dark)

Form Fields

Group form fields are created when different elements such as value selectors, input fields and buttons are grouped together.

Form fields take up as much width as the device’s screen allows while taking into account the 1.5 rem margins required on both sides. When a new element such as the delete icon is needed in the same row, the form will downsize and accommodate space for it.

Group Form Field (Normal)
Group Form Field (Undo State)
Single Form Field (Idle)
Single Form Field (Normal)
Single Form Field (Pressed)
Single Form Field (Idle)
Single Form Field (Normal)

Usage Examples

Input text field (disabled)
Input text field (expanded)
Input area (search contacts)
Input area (search email)
Group form fields

Download

You can download the Firefox OS Stencil PSD here.