UI Element States

Overview

Using the correct state or combination of states for a UI element helps users to recognize possible options and see where they need to take action.

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.

Overview of UI element states

Control States

A UI element can have only one control state at any given time.

Enabled

“Enabled” is the default state for all UI elements. The UI element is focusable, visible, and – if applicable – editable. The value of the UI element is easy to recognize.
To achieve the enabled state for input controls, set the “editable” property to “true”.

Enabled button

Enabled button

Enabled checkbox

Enabled checkbox

Enabled input field

Enabled input field

Use the “enabled” state if:

Do not use the “enabled” state if:

Disabled

Disabled UI elements are visible, but not focusable or editable. Depending on the theme, the value of the UI element might not be recognizable.

Disabled button

Disabled button

Disabled checkbox

Disabled checkbox

Disabled input field

Disabled input field

Use the “disabled” state if:

Do not use the “disabled” state if:

Never disable the checkboxes that are used to select items in a table or list. If an action can’t be executed for some of the selected items, keep the checkbox enabled and display an appropriate message when the action is triggered.

Hidden

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:

Do not use the “hidden” state if:

Actions can also be hidden by key users (for example, through runtime authoring).

Read Only

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.

Read-only checkbox

Read-only checkbox

Read-only input field

Read-only input field

Use the “read only” state if:

Do not use the “read only” state if:

Display Only

The display-only state is used for two cases:

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.

The display-only state is available for only a few UI elements. For most UI elements, you can achieve the same result by replacing them with display elements, such as text.

Display-only checkbox

Display-only checkbox

Use the “display only” state if:

Do not use the “display only” state if:

Value Help Only

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.

Value-help-only input field

Value-help-only input field

Use the “value help only” state if:

Do not use the “value help only” state if:

Value States

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.

None

“None” (same as “Regular”) is the default state. It means that no value state is applied. Do not change the value state unless you have a reason to do so.

Input field without value state

Input field without value state

Use the “none” state if:

Do not use the “none” state if:

Error

The error state marks a UI element if a validation fails with an error. Errors prevent users from continuing their work.

Checkbox with error

Checkbox with error

Input field with error

Input field with error

Use the “error state” if:

Do not use the “error” state if:

Warning

The warning state marks a UI element if a validation identifies a minor problem. Users can carry on working, but might run into an error later on.
In UI5, the warning state is called “Critical”.

Checkbox with warning

Checkbox with warning

Input field with warning

Input field with warning

Use the “warning” state if:

Do not use the “warning” state if:

Success

The success state marks a UI element if a validation succeeded without errors or warnings.

Input field - Success state

Input field - Success state

Use the “success” state if:

Do not use the “success” state if:

Information

The information state marks a UI element to draw attention to the information it provides.

Input field - Information state

Input field - Information state

Use the “information” state if:

Do not use the “information” state if:

Visual States

Visual states are handled by the corresponding UI element directly. A UI element can have only one visual state at any given time.

Regular

A UI element is shown in the regular visual state if the user is not interacting with it.

Regular button

Regular button

Regular checkbox

Regular checkbox

Regular input field

Regular input field

Hovered

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.

Button in hovered state

Button in hovered state

Checkbox in hovered state

Checkbox in hovered state

Do not use the “hovered” state if:

Pressed

The pressed state is displayed when a UI element is activated or remains in an activated state (“toggled”). A UI element is activated if a user clicks it.

Pressed button

Pressed button

Additional States

Focused

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”).

Initial Focus Position

When opening a new page, dialog or similar element, make sure that the focus is initially placed at a meaningful element. For example:

  • At the first focusable element below the launchpad shell bar
  • The first editable field
  • The first editable field that requires user input

Or in general: The element that is likely to be the first one used.

Focused button

Focused button

Focused checkbox

Focused checkbox

Focused input field

Focused input field

Selected

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.
Depending on the UI element, the “selected” state could also be named differently (for example, “Checked”).

Selected checkbox

Selected checkbox

Unselected check box

Unselected check box

Required

The “required” state for a user input element shows that users have to provide an input value. If no value is provided, validation fails.

Required input field

Required input field

Use the “required” state if:

Do not use the “required” state if:

Guidelines

Combining States

Control States

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:

In display mode, use only the following control states:

Visual States

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:

Value States

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:

Combining Different Types of State

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation

No links.

Visual Design

No links.