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 combobox (for fewer than 200 items) or the multi input component (for more than 200 items).

An input usually consists of a field that contains a text.

1. Field: Field container

2. Text: Placeholder or typed text

3. Icon (optional): For example, you can enable a Clear icon to remove the text that has been typed into the field.

Anatomy of an input

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 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 with value help

Always provide a meaningful label for any input. Labels are necessary to indicate the meaning of the input 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 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 can have three states:

The input 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 – enabled

The input 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 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 – read only

All interactive functions have been removed and the user is unable to interact with the input. 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 – 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 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 with suggestions

You can enable a Clear icon (:icon-decline ) in the input. It appears as soon as the input has a value. Clicking the Clear icon removes the value from the field. If you use this option, make sure that the input 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 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 with right-to-left text display