Intro

Text input controls are used to request a text entry from the user. They are usually found in the create or edit pattern.

Text input controls on compact screen (left) and expanded screen (right)

Usage

Do

Use text input controls to request a text entry from the user.

Don't

Don't use text input to request information that requires a specific format, such as dates, where specialized input controls would be more appropriate.

  • For short text inputs or ones that follow a specific format, use a simple property form cell.
  • For long, descriptive, or unstructured text inputs, use a note form cell.
  • Use an asterisk next to the label to indicate that the text input is required. For broader or less experienced audiences, include a note such as “Fields marked with an asterisk are required” at the top or bottom of the page, and repeat this consistently across the app.
  • Use capital case for labels.
  • Use sentence case for placeholder text, helper text, and error messages.
  • Provide meaningful error messages that tell the user how to fix the error.

Anatomy

A. Label

Describes the intent of the text input form cell. It may have an asterisk next to it to indicate that the input is required.

B. Input Area

Indicates tappable area where input values are displayed. It can be configured to include a variety of formats such as prefix and suffix or custom actions with icon.

C. Semantic Message

Provides additional information about the form cell. It can be configured to include warning or success messages.

If the cell is read-only, we recommend displaying helper text to inform users that it’s read-only or what actions users can take to change the input.

D. Right Accessory Icon (Optional)

In certain use cases, a custom icon such as barcode scanner may be used to populate the input field with information.

E. Character Counter (Optional)

Displays the number of input characters in real-time over the total character limit.

Anatomy of a text input form cell

Variations

Simple Property Form Cell

A simple property form cell consists of a label (property key) and a single-line text field (user input text). It is used for collecting short input.

The label is required for the simple property form cell. It helps users identify the purpose of the text entry.

Simple property form cell

Simple Property Form Cell with Scan

A simple property form cell can be enhanced by adding a secondary action to provide alternative input methods beyond typing. A scan icon indicates this feature. A helper text can be used to explain the feature to the user.

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

Simple property form cell with scan

Simple Property Form Cell with Show/Hide Password

For password entry, a secondary action is added to the simple property form cell. By default, password entry is displayed in an encrypted format. The user can tap on the eye icon to toggle password visibility.

Simple property form cell with hidden password (top) and shown password (bottom)

Simple Property Form Cell with Currency Format

For currency value entries, the text input form cell label features ISO currency codes and formats the entered value with the corresponding currency symbol along with separators. By default, the symbol and its placement are based on localized formatting but are customizable if needed.

Simple property form cell with formatted USD value (top) and EUR value (bottom)

Simple Property Form Cell with Semantic Message

A simple property form cell or note form cell can feature different semantic messages, such as a warning or success message, instead of a default helper text to provide contextual help and input validation.

Simple property form cell with warning message (top) and success message (bottom)

Note Form Cell

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

Note form cell

Behavior and Interaction

Character Counter

Default – Allow user to continue typing over the character maximum

In use cases where a user can continue typing over the character limit, the component displays an error once the user’s input surpasses the limit. The real-time counter turns red and the helper text appears or changes to “Reduce the number of characters”. The error state persists until the user’s input is shortened to within the character limit.

Character counter flow example: user input is allowed over limit and becomes an error Stop user from typing once the character maximum is met

In use cases where a user is restricted from typing over the character limit, the user’s input is automatically stopped once they reach the limit. The helper text appears or changes to “Character limit reached”.

Character counter flow example: user input is automatically stopped when limit reached

States

Enabled State

An optional placeholder text can be used to display a correct input value when the field is empty. It explicitly shows the user the expected text entry. Don’t use placeholder text for instructions because it disappears once the user starts typing. Instead, use helper text for instructions.

An optional helper text can be used to provide additional instructions. Helper text should be short and precise. Avoid wrapping to two lines.

The default state of the note form cell has a taller text field compared to the simple property form cell. This encourages users to enter more input.

Text input in a simple property form cell in enabled state (top) and text input in a note form cell in enabled state (bottom)

Error State

When the user-entered value does not pass validation, the simple property form cell enters an error state. An error icon appears, indicating that this cell has an error, and a message appears below the text input to provide instructions on how to fix the error.

We don’t recommend displaying both helper text and an error message at the same time. It is best to replace the helper text with the error message when the field is in an error state.

Text input in a simple property form cell in error state (top) and text input in a note form cell in error state (bottom)

Active Typing State

When the user is actively typing, a clear icon appears at the right end of the text field. The user can tap the “Clear” icon to delete all input. Generally, simple property form cells are used to collect short user inputs.

For simple property form cells, the height of the field is fixed. The text overflows to the left if the user types more than one line.

The note form cell text field can display three lines of text. As the user keeps typing, the text field can expand to a maximum height of six lines of text. This prevents the note form cell from covering the whole screen. After reaching the maximum height, the cell stops expanding. The content would scroll vertically inside the text field area as the text continues to wrap to a new line.

Text input in a simple property form cell in typing state (top) and text input in a note form cell in typing state (bottom)

Read-Only State

Read-only state indicates the current user role does not have the authorization to edit this field while the information in the field is relevant to fulfill the task. The text field changes to a gray background to hint this is non-interactive, with a helper text below stating “Read-only field”. The user can select and copy the existing value text, but can't activate the text field.

When in read-only state, the text field can expand to exceed the maximum height so that the text value is visible without scrolling inside the text field. The user can select and copy the existing text entry, but can’t change the text in the field.

Text input in a simple property form cell in read-only state (top) and text input in a note form cell in read-only state (bottom)

Disabled State

If a text input form cell is disabled, the input in this field (if any) does not affect the task of the user. The disabled cell has an opacity of 50% to reduce distraction.

Text input in a simple property form cell in disabled state (top) and text input in note form cell in disabled state (bottom)

Best Practices

Customization of Semantic Messages

Both the text and icon of semantic messages can be customized, however, you should only use icons that convey the meaning of the semantic message. If an icon doesn’t match the message, it should be hidden from assistive technology. Alternatively, provide accessibility labels to convey the meaning of the icon.

Custom color and icon applied to semantic message in simple property form cell in read-only state

Leading Icon and Trailing Icon

Icon slots can be swapped with custom icons of your choice. Ensure to maintain accessibility by adding suitable labels to convey the meaning.

Simple property form cell with leading icon (top) and trailing icon (bottom)

Resources

Development: FioriSimpleTextField, FioriNoteTextField, SimplePropertyFormCell, NoteFormCell

SAP Fiori for iOS: Text Input

Material Design: Text Fields