- Latest Version 1.128
- Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
- Latest Version 1.128
- Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
UI Element States
Depending on the UI element, different types of state are supported:
- Control states
- Value states
- Visual states
- Additional states
The table shows the possible states for each type.
A UI element can have only one control state at any given time.
Use the “enabled” state if:
- A UI element can currently be used.
- A UI element cannot currently be used, but disabling it is not an option because users might not know how to enable it. In this case, keep the UI element enabled and provide a message if it is used incorrectly.
Example: Enable a button even if the corresponding action can only be performed if a setting is made on another page or in a completely different subsection on the same page. - A UI element is a finalizing action, such as Save, Accept, OK, or Cancel. Finalizing actions are placed on the footer toolbar of a page or dialog.
- A button on a table toolbar does not depend on items in the table being selected.
Examples: Column Settings, Sort, Filter, Full Screen, Add - A button on a table toolbar depends on items in the table being selected, and one or more of the items currently selected fulfills the requirements for enabling the button.
- An action is global, such as Share or Print.
Do not use the “enabled” state if:
- A UI element cannot currently be used and it would be obvious how enable it. Disable it instead.
- A UI element cannot be used at all. Hide it instead.
Use the “disabled” state if:
- A UI element cannot currently be used, and it is obvious how enable it.
Example:
The user must click a checkbox to add a value in an input field. The input field is placed directly next to or directly below the corresponding checkbox. Disable the input field if the checkbox is not selected, and enable it as soon as the checkbox is selected. - A button on a table toolbar depends on items in the table being selected, and the current selection does not include suitable items.
Examples:- Disable Copy if nothing is selected.
- Disable Compare if fewer than two suitable items are selected.
- Disable Delete if the current selection contains only items that cannot be deleted, such as locked items.
Do not use the “disabled” state if:
- A UI element can never be enabled. Hide it instead.
- It would not be clear why a UI element is disabled. In this case, keep the UI element enabled and provide a message if it is used incorrectly.
- The input value of a UI element is relevant, and taken into account if a finalizing action is triggered. In this case, users must also be able to read the value. Use the read-only state instead.
Hidden UI elements are not visible, not focusable, and not editable. The UI element doesn’t take up any space. If a UI element is hidden at runtime, the freed space is used by subsequent UI elements.
Use the “hidden” state if:
- A UI element can never be used (for example, because the user has no authorization).
- Hiding the UI element is a meaningful form of responsive behavior.
Example: A column of a table is not needed on phones. - A UI element is not available in the current mode.
Example: Buttons that are only available in edit mode should be hidden in display mode. - A UI element is not available for the current state.
Examples:- Hide Delete on a page in an undeletable state, such as “sent”.
- Hide Delete as a line-item action for an undeletable item.
- Parts of the UI are changed based on a setting.
Example: When changing the setting, hide UI elements that are not available for the new setting.
Do not use the “hidden” state if:
- A UI element cannot currently be used, but can be enabled by user actions.
Examples:- A selection does not contain deletable items. In this case, disable Delete.
- A table was filtered down and currently doesn’t contain deletable items. In this case, disable Delete.
Read-only UI elements are displayed in edit mode, but are currently not editable. The UI element is visible and focusable. The value can be recognized and selected, but not changed.
Use the “read only” state if:
- A page or a part of it is in edit mode, and
- a UI element is currently not editable or changeable.
- an input value is relevant and needs to be taken into account when triggering a finalizing action.
- an input value must be readable.
Do not use the “read only” state if:
The display-only state is used for two cases:
- A UI element is used in display mode.
- A UI element is displayed in edit mode, but is never editable.
The visualization of display-only UI elements is optimized for reading. The type of UI element does not necessarily need to be recognized. The UI element is not focusable (exception: links), and not editable. Its value is recognizable and shown in full (not truncated). The UI element might also be displayed in a “compressed” format, where the information is displayed differently to the read-only or editable state.
Use the “display only” state if:
- A page or part of it is in display mode.
- An input value is relevant and needs to be taken into account (for example, it is sent on Submit)
- A page or part of it is in edit mode, and a UI element is never editable (for example, a UI element displaying a generated ID).
Do not use the “display only” state if:
If the control state is “value help only”, the UI element is displayed in edit mode, and is visible and focusable. The value of the UI element is recognizable. The value can be changed, but only with a value help dialog.
This state is only available for certain user input elements.
Use the “value help only” state if:
- A UI element can currently be used.
- User input is limited to specific values, and you don’t want to let users type in values directly.
Do not use the “value help only” state if:
- You want to allow free text entry.
- User input should be limited to specific values, but typing them is faster and more efficient. In this case, work with selects, combo boxes, or input fields with suggestions and validation to limit the user input to the permitted values.
- The surrounding page (or part of it) is in display mode.
Value states are only available for user input elements. A UI element can have only one value state at any given time. The value states make use of the semantic colors. For more information, see How to Use Semantic Colors.
Use the “neutral” state if:
- There is no reason to use another value state.
- The user input has not yet been validated.
- Validation of the user input was successful, without any issues.
- A message contains non-critical, additional information for users.
Do not use the “neutral” state if:
- User input was validated and a problem occurred. Depending on the severity, use the warning or error state instead.
- A message contains information about a warning or error.
Use the “error state” if:
- Users need to be prevented from finalizing the current mode or page.
- User input failed a validation, and the problem must be fixed before the user can continue.
- A message contains information about an error.
Do not use the “error” state if:
- User input was validated successfully. Use the neutral state instead.
- User input was validated and only minor problems occurred. Users can still finalize the current mode or page. Use the warning state instead.
- The surrounding page (or part of it) is in display mode.
Use the “warning” state if:
- The current mode or page can be finalized, but doing so might lead to an error later on.
- User input was validated and a minor problem occurred. It is possible to continue without fixing the problem, but doing so might lead to an error later on.
- A message contains information about a warning.
Do not use the “warning” state if:
- User input was validated successfullly. Use the neutral state instead.
- User input was validated and a major problem occurred. Users must fix the problem before finalizing the current mode or page. Use the error state instead.
- The surrounding page (or part of it) is in display mode.
Use the “success” state if:
- A message contains information about a process that was finalized without any issues. Users will need this information later on (for example, values that need to be copied to another app).
Do not use the “success” state if:
- A process was finalized successfully and a short notification is enough. In this case, use a message toast instead.
- The surrounding page (or part of it) is in display mode.
Use the “information” state if:
- You want to draw attention to a control, such as highlighting intelligent recommendations.
Do not use the “information” state if:
- The surrounding page (or part of it) is in display mode.
- User input was validated successfully. Use the neutral state instead.
- User input was validated and a major problem occurred. Users must fix the problem before finalizing the current mode or page. Use the error state instead.
Visual states are handled by the corresponding UI element directly. A UI element can have only one visual state at any given time.
The hovered state shows that the cursor of a pointing device (such as a mouse or pen) is currently placed on a UI element that is in an enabled, read-only, or value-help-only state.
The hovered state is not available if the UI element is used with keyboard and touch devices.
The focus determines which UI element receives the user input when the user input itself does not supply positioning information (for example, keyboard input).
Only one UI element can have the focus at any given time.
The focus is changed by activating another UI element with an input device that provides positioning information (mouse, pen, touch). Clicking an area without a focusable UI element removes the focus until another UI element gets the focus through a user interaction.
With a keyboard, the focus is changed as follows:
Key(s) | Change in Focus |
TAB | Move forward |
SHIFT + TAB | Move backward |
F6 | Move the focus forward to the first element of the next group. |
SHIFT + F6 | Move the focus backward to the first element of the previous group. |
Arrow keys | Move the focus between items (for example, within lists, tables, calendars, or charts). |
When you move the focus using the keyboard, the newly-focused element does not get activated (“pressed”).
The “selected” state shows that the UI element is currently selected. This state is only available for selectable controls, such as checkboxes, radio buttons, or items.
Use the “required” state if:
- A UI element must contain user input.
Do not use the “required” state if:
- User input is not mandatory.
- The UI element is not intended for user input, such as a title.
- The surrounding page (or part of it) is in display mode.
Use only one control state at any given time. If several control states need to be combined, use the most restrictive state.
List of control states in edit mode, from the most restrictive to the least restrictive:
- Hidden
- Disabled
- Display only
- Read only
- Value help only
- Enabled
In display mode, use only the following control states:
- Hidden
- Display only
- Enabled (for display controls only)
Use only one visual state at any given time. If several visual states need to be combined, use the one that requires the most user interaction.
List of visual states, from the most to least user interaction:
- Pressed
- Hovered
- Toggled
- Regular
Use only one value state at any given time. If several value states need to be combined, use the most severe state.
List of value states, from the most severe to the least severe:
- Error
- Warning
- Success
- Neutral
- Hidden and disabled UI elements cannot be combined with any other state.
- Display-only UI elements can be combined with the pressed state (toggle only) and the selected state.
- Read-only UI elements can be combined with pressed state (toggle only) and with the selected state. In addition, read-only elements can be focused.
- Value-help-only UI elements can be combined with any visual states. In addition, they can be required and focused.
- Enabled UI elements can be combined with any visual state, any value state, and any additional state.
Elements and Controls
- How to Use Semantic Colors (guidelines)
- Input Field (guidelines)
- Message Handling (guidelines)