Do

Use the input component:

• To enter a short, single-line text or number.
• To enter a password, URL, phone number, or email address.
• To select a single item from a large amount of data (for example, more than 200 items).
• To find an object by searching for more than one attribute, such as an ID, city, and customer name.

Don't

Don’t use the input component:

• To enter dates and times. Instead, use the date picker, date range selection, or date/time picker.
• To enter long texts. Use the text area component instead.
• To select multiple values. In this case, use the multi-combo box (for fewer than 200 items) or the multi-input component (for more than 200 items).

To help the user find the correct value, you can add a value help option. A small value help icon (:icon-value-help ) is then displayed in the input field on the right. To give a better indication of the type of data that can be selected, you can exchange the value help icon.

https://www.sap.com/design-system/live-examples/Input/Input_SE_VariantInputwithValueHelp.html

Input field with value help

Always provide a meaningful label for any input field. Labels are necessary to indicate the meaning of the input fields when the placeholders are no longer visible.

To indicate that a particular field is mandatory, set the “Required” indicator for the label. This displays an asterisk (*) next to the label associated with the field.

https://www.sap.com/design-system/live-examples/Input/Input_SE_VariantInputwithLabel.html

Input field with a label

An input component can be used as a search field (free text search). You can also use the search field to filter a set of data.

https://www.sap.com/design-system/live-examples/Input/Input_SE_VariantInputSearch.html

Input as a search field

Enabled, Read-Only, and Disabled States

An input field can have three states:

The input field is currently active and allows user interaction. It can be empty, contain a placeholder text, or contain a value entered or selected by the user.

https://www.sap.com/design-system/live-examples/Input/Input_SE_VariantEnabled.html

Input field – enabled

The input field contains valid values and is visualized differently to indicate that editing isn’t possible. The read-only state is similar to the disabled state in that interactive functions are removed. However, a read-only input field can still be focused on and recognized by screen readers. It also complies with visual contrast standards for readability.

https://www.sap.com/design-system/live-examples/Input/Input_SE_VariantReadOnly.html

Input field – read only

All interactive functions have been removed and the user is unable to interact with the input field. The field can’t be focused on or recognized by screen readers, and doesn’t need to meet visual contrast requirements.

https://www.sap.com/design-system/live-examples/Input/Input_SE_VariantDisabled.html

Input field – disabled

Using suggestions and autocomplete is the quickest way for users to discover and select relevant input terms and values.

• The current typed term is always highlighted with bold text.
• Only the characters entered in the input field are highlighted, not the whole word.
• All relevant instances are highlighted, even if they occur in one line item.

https://www.sap.com/design-system/live-examples/Input/Input_SE_WithSuggestions.html

Input field with suggestions

You can enable a Clear icon (:icon-decline ) in the input field. It appears as soon as the input field has a value. Clicking the Clear icon removes the value from the field. If you use this option, make sure that the input field is wide enough to show the Clear icon in addition to the value.

https://www.sap.com/design-system/live-examples/Input/Input_LE_main.html

Input field with ‘Clear’ icon – live example

The input component supports left-to-right (LTR) and right-to-left (RTL) reading directions.

https://www.sap.com/design-system/live-examples/Input/Input_SE_RTL.html

Input field with right-to-left text display