Overview
Unlike our desktop based components, the mobile text input has two “structures”. The “outline” text input variant can be broadly used and should be consider the default option, whereas the “solid” structure should not be used when the alt-background is used for page background.
In addition to the structure of the text input, there are two sizes of this component: default (similar to the text field desktop component) and large (similar to the textarea desktop element).
Key Features
- The “outline” structured text input should be used as the default variant for the component.
- The “solid” text input is an optional mode that can be used to provide greater depth and contrast. This should type of text input should only be used against a white background.
- To provide users guidance on the text limits for a given text input, designers can enable the character counter against the large text input.
- The large size of the text input should be used for tasks that require longer strings of text such as descriptions or additional notes.
The different types of the text input align with those used for the desktop, Text Field, component. Below are the included types:
- Placeholder
- Populated
- Error
- Disabled
Usage
Only use the "outline" structured text input for pages that are using the alt-background.
Avoid using the "solid" structured text input against the alt-background page.
Limit the number of "large" sized text inputs, opting first for "default" sized text inputs where possible.
Avoid using more than one large text input per page.