Firefox OS Input Areas
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.
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 are background sensitive and have been designed for implementation with both light and dark apps. They are placed just below the header.
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.
You can download the Firefox OS Stencil PSD here.