Intro

Text input controls are used to request a text entry from users. They are normally found in create and edit patterns as a part of completing the task.

Text input controls mobile (left) and tablet (right)
Text input controls mobile (left) and tablet (right)

Variations

Currently, there are two types of text inputs. Depending on the length of the text that users need to provide, there are two types of text input controls:

Single-line input: simple property form cell

Multi-line input: note form cell

Simple Property Form Cell

A simple property form cell consists of a label (property key) and text field. It is used for collecting short input. The label gives the user more context about the associated text entry. The label is always required, while the placeholder text is optional. The placeholder text should inform the user about the type or format of the value to be entered.

Simple property form cell
Simple property form cell

The height of the field is fixed, so the text will overflow to the left if the user types more than one line.

Overflow of simple property form cell
Overflow of simple property form cell

An optional helper text can be used to provide additional information. When the input does not pass validation, an error message will appear. Do NOT display both helper text and error message at the same time, replace helper text with the error message instead.

Simple property form cell with helper text (top) and validation message (bottom)
Simple property form cell with helper text (top) and validation message (bottom)

Simple Property Form Cell with Scan

A secondary action can be added to a simple property form cell to provide input methods besides typing. Currently, we support getting a text value through bar code or QR code scan. A “scan” icon is used to indicate the feature. A helper text can be used to explain the feature to the users.

A scanner is launched when user taps on the “scan” icon. The user may scan a barcode or QR code of the object to get the property specified in the cell. The value will be filled in the simple property cell. The user may edit the value directly if needed.

Simple property form cell with scan
Simple property form cell with scan
Simple property form cell with scan animation
Simple property form cell with scan animation

Note Form Cell

The note form cell is best used for collecting long user input, such as a note, comment, or description.

The default state of the note form cell is the same as simple property cell to reduce the amount of space it takes. When the user types more than one line, the text will wrap, and the cell expands to show the new line. As a result, content below this cell is pushed down. This is useful for showing long text in a limited area.

Note form cell
Note form cell

To avoid taking over the whole screen, note form cell is limited to show a maximum 6 lines of text. After reaching the maximum height, the cell stops expanding and the text continues to wrap to a new line, but the content would scroll vertically inside the text field area.

Overflow of note form cell
Overflow of note form cell

An optional helper text can be used to provide additional information. When the input does not pass validation, an error message will appear. Do NOT display both helper text and error message at the same time, replace helper text with the error message instead.

Note form cell with helper text (top) and validation message (bottom)
Note form cell with helper text (top) and validation message (bottom)

Specifications

Simple Property Form Cell

Simple property form cells are responsive to screen size. The horizontal padding follows the keylines of the device.

Mobile

Below are specs for simple property form cells in idle (filled with user input), active, and error states.

Simple property form cell on mobile
Simple property form cell on mobile
Simple property form cell on mobile - specifications
Simple property form cell on mobile - specifications
Simple property form cell with scan on mobile
Simple property form cell with scan on mobile
Simple property form cell with scan on mobile - specifications
Simple property form cell with scan on mobile - specifications


Tablet

Below are specs for simple property form cells in idle (filled with user input), active, and error states.

Simple property form cell on tablet
Simple property form cell on tablet
Simple property form cell on tablet - specifications
Simple property form cell on tablet - specifications
Simple property form cell with scan on tablet
Simple property form cell with scan on tablet
Simple property form cell with scan on tablet - specifications
Simple property form cell with scan on tablet - specifications


Note Form Cell

Note form cells are responsive to screen size. The horizontal padding follows the keylines of the device.

Mobile

Below are specs for note form cells in idle (no user input), active, and error states.

Note form cell on mobile
Note form cell on mobile
Note form cell on mobile - specifications
Note form cell on mobile - specifications

Below are specs for note form cell at maximum height.

Maximum height of note form cell on mobile
Maximum height of note form cell on mobile
Maximum height of note form cell on mobile - specifications
Maximum height of note form cell on mobile - specifications


Tablet

Below are specs for note form cells in idle (no user input), active, and error states.

Note form cell on tablet
Note form cell on tablet
Note form cell on tablet - specifications
Note form cell on tablet - specifications

Below are specs for note form cell at maximum height.

Maximum height of note form cell on tablet
Maximum height of note form cell on tablet
Maximum height of note form cell on tablet - specifications
Maximum height of note form cell on tablet - specifications

Resources

Development: Simple Property Form Cell, Note Form Cell

SAP Fiori for iOS: Text Input

Material Design: Text Fields