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.

Types of State

UI elements can have different types of state. Follow the links below to see the guidelines for each state.

Combining States

Certain states can also be combined. For details, see State Combinations.

The component state determines the interactivity and the visibility of the component. A component can have only one component state at any given time.

Variants

The following component states are available:

• Enabled
• Disabled
• Read-only
• Hidden

Enabled

An enabled component can be interactive and can be used to perform the action. Usually, this is the default state for all components. The component is focusable, visible, and – if applicable – editable.

  Use:

• If a component can currently be used.

  Don’t Use:

• If a component can’t currently be used.
• If a component can’t be used at all. Hide it instead.

Disabled

A disabled component can’t currently be used. Disabled components have reduced visibility and aren’t focusable or editable.

  Use:

• If a component can’t currently be used, but it’s obvious how to enable it.

  Don’t Use:

• If the user can never enable the component. Hide it instead.
• If it wouldn’t be clear why a component is disabled. In this case, keep the component enabled and provide a message if it is used incorrectly.

Read Only

Read-only components are displayed in edit mode, but aren’t editable. The component is fully legible and focusable. The value can be recognized and selected, but not changed.

  Use:

• If a page or a part of it is in edit mode, and a component is currently not editable or changeable.
• If an input value must be readable.

  Don’t Use:

• If a component can never become editable. Use alternatives instead (such as text, or display only).

Hidden

Hidden components are not visible, not focusable, and not editable. The component doesn’t take up any space.

  Use:

• If a component can never be used (for example, because the role or group assigned to the user doesn’t include the necessary authorization).
• If hiding the component is a meaningful form of responsive behavior. Example: A column of a table isn’t needed on phones.
• If the component isn’t available for the current context.
• If parts of the UI are changed based on a setting.

  Don’t Use:

• If a component can’t currently be used, but can be enabled by user actions.

Related Links

A multi input allows the user to enter multiple values, which are displayed as tokens.

To help the user enter a valid value, you can enable the suggestions feature and the value help option.

Multi input – live example

When to Use

Use the multi input:

• To provide the value help option to help users select or search for multiple business objects.
• To let users select multiple ranges (with the value help).
• To enable users to add custom values.

Don’t use the multi input:

• To choose multiple options from a large list.
• If there is not enough space available on the screen.
• To choose only one option from a list.

Anatomy

1. Tokens: Show individual selected values.
2. Input field: Area for displaying tokens and typing text.
3. Value help icon: Trigger for opening a value help dialog.

Variants

With Tokens

Predefined Tokens Only

The user can write text in the input field that does not correspond with the predefined values in the list, but a token isn’t created and the text just appears in the input field.

Multi Input with predefined tokens – live example

Including Token Creation

The user can write text in the input field that does not correspond with the predefined values in the list and create tokens with this text.

Create token from value entered – live example

With Value Help Icon

You can add a value help icon in the input field to trigger a separate value help dialog for selecting the values. The dialog must be implemented separately.

Basic multi input with value help icon

Behavior and Interaction

Select/Enter Values

To add values to the multi input, users can:

1. Start typing and select a value from the dropdown list. The selected values appear as tokens.
2. Type a text and press Enter to add a new value. This creates a new token with the typed text.

If there isn’t enough space to display all the tokens, an overflow button appears (n More, or n Items).

The user can only enter a value once. The multi input displays an error if the same token is selected twice.

Empty multi input – live example

View/Adjust Selection

If tokens are hidden in the overflow, clicking n More or n Items displays all the selected values.

Multi input with multiple tokens – live example

Globalization and Localization

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

Related Links

The combobox allows users to select an item from a predefined list.

It provides an editable input field for filtering the list, and a dropdown menu with a list of the available options.

If the entries are not validated by the application, users can also enter a custom value.

Combobox – live example

When to Use

Use the combobox:

• If users need to select a single item from a long list of items.
• If the list items are secondary information and do not need to be displayed right away.

Don’t use the combobox:

• If there are only two options to choose from. Use a switch instead.
• If users need to select an item from a short list of items. Use the select component instead.
• If there are more than 200 list items. Instead, consider using an input field with a select or value help dialog.

Anatomy

1. Input field: Displays the selected value.
2. Value/text: The content the user has entered into the field.
3. Dropdown button: Expands and collapses the option list.
4. Option list: Contains values from which the user can choose.

Variants

List Layouts

Use the two-column layout if you need to display additional information for each option.

You can group items in the option list.

Two-column layout – live example

Grouped items

Filters

When the user starts typing in the input field, the option list is filtered. Only items that match the characters entered are shown in the dropdown list. The following filter variants are available:

Starts with per term (default): Filters for items where the beginning of any word in in the label matches the query entered.

Starts with: Filters only for items where the beginning of the label matches the query entered.

Contains: Searches the full label for a match.

‘Starts with per term’ filter variant – live example

‘Starts with’ filter variant – live example

‘Contains’ filter variant – live example

Behavior and Interaction

Choose from List

1. Clicking the dropdown button opens the suggestion list.
2. Selecting an item from the list enters it in the input field.

Type or Paste Text

1. The component responds as the user types or pastes in text:
   • Suggestions are filtered based on the typed text (see Filter Variants).
   • The autocomplete feature proposes matching labels. The autocompleted part of the text is highlighted.
2. To enter a value in the input field, the user can:
   • Press Enter to accept the autocompleted text.
   • Click an item in the suggestion list.

Combobox – live example

Handling of Incorrect Values

• If the user pastes or types a text that doesn’t match one of the selection options, it remains in place by default.
• If data validation is implemented, entering an incorrect text triggers an error message and the field displays in an error state.

Data validation – error state for incorrect value

Responsive Behavior

On mobile phones, the selection list is displayed as a full screen dialog.

Related Links

The date picker lets users enter a single date and navigate directly from one month or year to another.

Basic date picker- live example

When to Use

Use the date picker:

• If users typically need to enter a single date.
• To navigate directly from one month or year to another.
• Тo enter a lot of data fast or primarily using the keyboard.

Don’t use the date picker:

• If you need a combined date and time input component. In this case, use the date/time picker.
• If you need to keep the calendar visible and prominent. In this case, use the calendar.
• If users typically need to enter a date range. Use the date range picker instead.

Anatomy

1. Date input field: The container in which a user enters data. It contains a mask.
2. Text: A placeholder or selected/typed text.
3. Date picker button: Button that opens the calendar.
4. Calendar component

Variants

The date picker supports Gregorian, Japanese, Buddhist, Islamic and Persian calendars. You can use a single calendar type only, or show two calendar types – one primary and one secondary.

Single Calendar Type

The date picker supports Gregorian, Japanese, Buddhist, Islamic and Persian calendars.

Two Calendar Types

In addition to the primary calendar, you can add a secondary calendar type.

Date picker with an Islamic calendar- live example

Date picker with a secondary calendar – live example

Custom Placeholder

You can provide a custom placeholder text. By default, the placeholder text shows the specific date format (based on the user’s locale).

Restricted Date Range

You can set minimum and maximum dates. In this case, the user can only select dates within the approved range.

Date picker with a custom placeholder text – live example

Date picker with restricted date range – live example

Behavior and Interaction

Selecting a Date

If the date picker is editable, the user can select a date in two ways:

• By typing in the input field.
• By choosing a date from the calendar. After selection, the calendar closes and the date appears in the date input field.

Navigation

To change the month, the user can either use the Previous/Next arrows or select a specific month in the month view.

To change the year, the user can either scroll through the months with the Previous/Next arrows or select a specific year in the year view.

Shortcuts

The following shortcuts are available for entering specific dates:

• “today”
• “yesterday”
• “in x days”
• “x days ago”

Date picker with shortcuts – live example

Restricted Date Range

If minimum and maximum dates have been set, selection and navigation to dates outside this range is disabled.

Formatting

If the user types the date in the input field, it must fit the required date format. For example, if the format pattern is “yyyy-MM-dd”, a valid user input would be “2015-07-30”.

Supported format options are pattern-based on Unicode Locale Data Markup Language (LDML) date format notation.

Related Links

A toggle button allows users to toggle between two states: active (pressed) and inactive (not pressed).

For example, a toggle button might be used to show or hide a screen element or to provide a filtered view of a dataset.

Toggle buttons – live examples

Toggle buttons with semantics – live examples

Disabled toggle buttons – live examples

When to Use

Use the toggle button:

• To switch between different states.
• To activate or deactivate an object or element in a toolbar.

Don’t use the toggle button:

• For actions that trigger an activity, flow, or process (such as Create, Edit, or Save). Use the button instead.
• To show a group of options. Use the split button or the segmented button instead.

Anatomy

1. Background: Different background colors visualize the state of the button.
2. Text / Icon: Describes or visualizes the state when the button is pressed.

Variants

Three toggle button variants are available:

• Text only
• Icon only
• Text and icon

Toggle button variants – live examples

(from top to bottom: text only, icon only, text and icon)

The toggle button also visualizes the priority of the action. Three variants are available:

• Primary
• Secondary (= standard)
• Tertiary

Toggle button variants for prioritization – live examples

(from top to bottom: primary, secondary, tertiary)

Behavior and Interaction

Pressing the toggle button switches between the active and inactive states. The impact of the toggle button is directly recognizable.

Toggle button behavior – live examples

Related Links

The title is a simple, large-sized text containing additional semantic information about the header level for accessibility purposes.

Title levels 1-6

When to Use

Use the title:

• To display a title above a table or form.
• To show headings in the page header.

Don’t use the title:

• If text is inside a text block. Use normal text instead.
• If text is inside a form element. Use the label instead.

Variants

Header Level

Six semantic header levels are available, ranging from H1 (highest) to H6 (lowest). The higher the level and the larger the font size, the more important the title is.

Even if titles presented on the page in a mixed order for visual appeal, assigning them to the correct header level ensures that the semantic meaning of the title is described correctly for screen reader users.

Title variants for different header levels

Header Style

The style of each header level depends on the theme being used and the specific use case. As a result, different styles may be used for titles with the same header level.

Header levels with different header styles

Title as a Link

A title can also be a link.

Title on different title level as a link – live example

Responsive Behavior

Wrapping and Truncation

You can define whether the text should wrap or truncate when there is not enough space.

For example:

• If the title is placed outside components like a toolbar, shell bar, or dialog (dialog header), use wrapping.
• If the component is designed to save vertical space, and only allows one line of the text with a limited width (like the title of a toolbar), use truncation.

Wrapped and truncated titles

Related Links

When to Use

Use the table:

• If you need to display tabular data.
• To enable selection of one or more items when details are needed to choose the correct item.
• If rows are independent of each other and no operations are required across columns.
• If you want to have only one implementation for all devices.

Don’t use the table:

• To display content that doesn’t require tabular data, such as text or images.
• To create a layout.

Anatomy

Table

1. Column Header: Contains the title for each column.
2. Column: Vertical arrangement of data within the table. A column represents a single type of information that is associated with each row in the table.
3. Row: Horizontal arrangement of data within the table. A row represents a line item for an entity with multiple data points, organized in columns.
4. Cell: A cell can contain any type of component. Each cell can contain one or more lines of text.

Group Row

A group row is a visual separator between sets of data in the table. It is used to group related data and make it easier to read and understand.

Each group row contains a heading that describes the data below it. To preserve the intended design, we strongly recommend using text only.

Variants

You can adapt the following table parameters

• Set “sticky” column headers
• Selection mode
• Growing behavior
• Components per cell
• “No data” message for empty tables
• Display of a busy indicator

Table with Sticky Column Header

You can set the column header of the table to remain fixed at the top of the page during vertical scrolling as long as the table component is in the viewport.

Table Selection Mode

The table supports different types of selection mode:

• None (default)
• Single selection
• Multiple selection

Growing Behavior

You can let the table grow – either by adding a scrollbar to the table or by showing a More button. By default, the growing capability is switched off.

Cells with Additional Components

Table with No Data

Busy Indicator

Behavior and Interaction

Focus

Single Selection Mode

Multiple Selection Mode

Sticky Column Header

If the column headers are set to “sticky”, they remain in place when the user scrolls down.

Touch Enablement

The behavior for selecting a row from the table on touch devices is similar to the mouse interaction.

The gesture for selecting a row is a one-finger tap.

Responsive Behavior

You can make tables responsive on smaller screens by hiding columns or by moving some content into the first column.

Use of these responsive features is optional. By default, the table just minimizes all visible columns until they are no longer readable.

If you don’t implement the responsive behavior, ensure that you provide an adaptive solution for smaller screens.

Minimum Width

For each column, you can set the minimum table width that is required for the column to be displayed. In this way, you can determine which columns are shown for different screen sizes. You can also allow the column to “pop in” instead of hiding it (see below).

Pop-In Mode

• Inline: Label/value pairs are listed next to each other.
• Block: Label/value pairs are listed one below the other.

Depending on how the table will be used, we recommend using the last column to show right-aligned content.

Table in pop-in mode

Content Density

The table is available in two different sizes:

• Cozy: Broader spacing for touch devices
• Compact: Regular spacing for desktop devices

Globalization and Localization

For right-to-left languages, the table is mirrored. In pop-in mode, the content pops in on the right.

Related Links

The tab bar comprises a series of tabs that each link to a different content area or view. You can use the tab bar to navigate between subpages for an object, as a filter, or to visualize process steps.

Tab bar – live example

When to Use

Use the tab bar:

• To display multiple subpages for a business object on one page.
• To let users switch easily between subpages.
• To visualize clear-cut process steps.
• To offer prominent, one-click visual filters above a set of items.

Don’t use the tab bar:

• To show only a single tab.

Anatomy

Tab Bar

1. Main bar: Contains two types of element:
   1. Tab: The clickable item inside the tab container.
   2. Tab separator: Visual indicator used to separate the tabs.
2. Overflow menu: Contains any remaining tabs that can’t be displayed in the available space.
3. Content area: Contains the content for the selected tab.

Tab

1. Icon: Icon for the tab.
2. Text: Text for the tab.
3. Additional text: Supplementary text for a tab, such as a count.
4. Subtabs: A tab can contain subtabs. For details, see Hierarchies.

The visual representation of the tab adapts automatically, depending on the elements it contains.

Variants

You can use different tab bar variants, depending on your use case:

• Text tabs
• Icon tabs
• Filter tabs
• Process tabs

Text Tabs

Text tabs allow longer labels, which are not truncated. They can also display a count after the text to indicate number of items on the tab page.

Tab bar with text tabs – live example

Icon Tabs

These round tabs can be populated with any icon. Labels are optional. If you decide to use labels, use them for all tabs. You can use additional text as needed.

Tab bar with icon tabs – live example

Filter Tabs

When used as a filter, the tab bar can contain a tab for displaying all items (optional), in addition to the individual tabs for each filter attribute. We strongly recommend showing the count as an additional text for every tab.

Tab bar with filter tabs – live example

Process Tabs

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

Tab bar with process tabs – live example

Behavior and Interaction

Selection

Only one tab can be selected at a time. Selecting a new tab deselects the tab that was displayed previously.

Tab selection – live example

Hierarchies

The tab bar supports hierarchies, allowing you to group multiple tabs under a main tab. The label of the main tab then serves as the heading for the group. An arrow indicates that a tab has subtabs.

If the parent tab has its own content, it is separated into two interactive areas, like a split button:

• Clicking the left area (text) displays the content for the parent tab.
• Clicking the right area (arrow) opens a menu with the subtabs.

Parent tabs with own content – live example

If the parent tab doesn’t have its own content, it has only one interactive area. Clicking the main tab opens the menu with the available subtabs.

Parent tabs without own content – live example

Responsive Behavior

Overflow

If there isn’t enough space to show all the tabs on the main bar, an overflow menu appears automatically, containing all the remaining tabs.

You can set the overflow mode, depending on your use case:

• End (default): The overflow only appears at the end of the tab bar. Use this mode if the order of the tabs isn’t relevant.
• Start and End: The overflow menu can appear dynamically either on one or on both sides of the tab bar. Where the overflow appears depends on which tab is activated. Use this mode if the tabs need to stay in the same order.

You can also replace the buttons for the overflow menus with custom buttons.

Overflow mode ‘End’ – live example

Overflow mode ‘Start and End’ – live example

Related Links

The switch mimics a physical switch. It allows users to toggle individual features on or off.

Switches are mainly used for settings, personalization, and other use cases where the impact of the switch is directly recognizable.

Switches – live examples

When to Use

Use the switch:

• To set something as active or inactive (such as a dialog).
• To clearly show the mode or state of a setting.
• If the change takes immediate effect.

Don’t use the switch:

• If additional steps are required for changes to take effect (for example, if the setting requires confirmation or a Submit button). Use a checkbox instead.
• If it’s not clear whether the component is showing a state or an action. Use a checkbox instead.

Anatomy

1. Track: The track is the container for the handle. The track color also visualizes the state of the switch.
2. Handle: The handle indicates whether the switch is toggled on or off. This is visualized by different icons within the handle.

Behavior and Interaction

Clicking the switch toggles the state of the switch between active and inactive. If the switch is active, the described state is applied.

Clicking a switch sets the focus to the switch component. This is indicated visually by a solid line that surrounds the entire component.

Switches behaviour and interaction – live examples

Related Links

The step input component allows the user to change the input value in predefined increments (steps).

Step input – live example

When to Use

Use the step input component:

• To adjust amounts, quantities, or other values quickly.
• To adjust values for a specific step (for example, in a shopping cart).

Don’t use the step input component:

• To enter a static number (for example, postal code, phone number, or ID).
• To display a value that rarely needs to be adjusted and does not pertain to a particular step.
• To enter dates or times.

Anatomy

The step input component consists of:

1. Icon buttons to decrease or increase the value
2. An input field

Variants

The value in the input field can be aligned left, centered, or aligned right (default). To make it easier to compare numbers, we recommend using right alignment.

You can also use a label with the step input component.

Step input with right-aligned value (default) – live example

Step input with centered value – live example

Step input with label

Behavior and Interaction

The user changes the value by clicking the increase/decrease buttons, by typing a number, or by scrolling. The buttons increase or decrease the value by the increment (step) you specify.

Initial Value

The input field always contains a value. You can set the initial value or leave the default initial value of 0.

You can also add a placeholder text, which is visible when the value is deleted and the step input is active.

Step input with initial value set to 1 and placeholder – live example

Value Precision

The step input component supports decimal values. You can specify the number of digits displayed after the decimal point.

Step input with value precision set to 1 decimal place – live example

Minimum and Maximum Values

You can specify minimum and maximum values. When the minimum or maximum value is reached, the corresponding increase/decrease button and up/down keyboard navigation are disabled.

If the user manually enters a value that is outside the permitted range, the step input component displays an error state and message.

Step input with a minimum value of -10 and a maximum value of 10 – live example

Related Links

The split button allows users to trigger different actions via two interactive areas: a default action on the left and a menu with additional actions on the right.

Split buttons – live examples

Split buttons with semantics – live examples

Disabled split buttons

When to Use

Use the split button:

• To offer a group of actions when one option is used more often than the others.

Don’t use the split button:

• To switch between different states. Use the toggle button or the switch instead.
• For standalone actions with no additional options. Use the button instead.

Anatomy

1. Background: Different background colors visualize the state of the button.
2. Text / Icon: Describes or visualizes the action that is triggered by the left interactive area.
3. Separator: Indicates that the two areas result in different actions.
4. Arrow: Opens the menu.

Variants

Three split button variants are available to indicate the default action:

• Text only
• Icon only
• Text and icon

Split button variants to visualize actions – live examples

(from top to bottom: text only, icon only, text and icon)

The split button also visualizes the priority. Three variants are available:

• Primary
• Secondary (= standard)
• Tertiary

Split button variants for prioritization – live examples

(from top to bottom: primary, secondary, tertiary)

Behavior and Interaction

The split button has two interactive areas:

• The left click-area triggers the default action.
• The right area (arrow) opens a menu with the additional actions. For more information, see Menu.

Split button behavior – live examples

Related Links

A slider enables the user to adjust a single value within a specified numerical range.

Slider – live example

When to Use

Use the slider:

• If you want to provide graphical support for changing a value.

Don’t use the slider:

• For decorative purposes.

Anatomy

1. Start point: Minimum value of the slider range.

2. Track (active or inactive)

3. Slider handle: Grip for setting the value.

4. Tooltip (optional): Displays a tooltip with the current value above the handle.

5. Tick marks (optional): Visualize the value intervals (steps). Each tick mark represents a selectable value.

6. Labels (optional): Labels some or all of the tick marks with their values.

7. End point: Maximum value of the slider range.

Variants

The following slider variants are available:

Basic slider

Disabled slider

Slider with tooltip

Slider with tooltip, tick marks, and labels

Behavior and Interaction

Changing the Value

If the slider is editable, the hand cursor appears when the user hovers over the slider.

The user can change the slider setting in the following ways:

• By using drag and drop to adjust the handle. The handle snaps to the nearest interval value.
• By clicking the track. The handle then moves to this new position.
• By using the key combination Shift/Cmd + Arrow keys.

Slider with tooltip, tick marks, and labels – live example

Responsive Behavior

Related Links

Basic select component – live example

When to Use

Use the select component:

• If users need to select only one item from a short list of options.
• If the values in the option list are of secondary importance and do not need to be displayed right away.

Don’t use the select component :

• If users need to choose between only two options. Use a switch instead.
• You need to offer a very large set of options. In this case, use a combobox
• You need to display more than one attribute or search on multiple attributes. In this case, use an input with a select dialog / value help.
• All available options need to be displayed right away. In this case, use radio buttons.

Anatomy

1. Input field: Displays the selected value.
2. Value/Text: The content that is selected.
3. Dropdown button: Expands and collapses the option list.
4. Option list: Contains the selectable values.

Variants

Two-Column Layout

Use the two-column layout if you need to display additional information for each option, such as currencies or abbreviations.

Select with a two-column layout – live example

Adjustable Width

The width of the option list adapts to its content.

Select with adjustable width – live example

Basic Select with Icons

You can display an icon for each option.

Select with icons 

Behavior and Interaction

If the select component is editable, the user can select an item by first clicking on the dropdown button and then choosing a specific option from the list.

On mobile phones, the option list is displayed as a full screen dialog.

Related Links

A segmented button is a group of buttons that can be toggled. The group appears as one large button with multiple segments.

Segmented buttons – live examples

When to Use

Use the segmented button:

• To let users choose from a small group of options, such as “Year, Month, Day” or “Small, Medium, Large”.

Don’t use the segmented button:

• If there are too many options. Consider using a split button or radio button group instead.
• If multiple options can be active at once. Consider using a checkbox group instead.

Anatomy

1. Background: Different background colors visualize the state of the button and indicate the interactive areas (segments).
2. Text / Icon: Describes or visualizes the action that is triggered for each interactive segment.

Variants

For visual representation:

• Text only
• Icon only

Text only – live example

Icon only – live example

For selection modes:

• Single: Only one item is selectable. Selecting an item deselects the previous one.
• Multi: Multiple items can be selected at once. All items ca be unselected.

Note: The segmented button can be configured to start with no items selected. However, additional customization is required to enable this functionality.

Single selection mode – live example

Multi selection mode – live example

Behavior and Interaction

The segmented button behaves differently in single and multi selection mode.

Single: When the user clicks one of the options, this option becomes active (pressed). All other options remain or become inactive (not pressed).

Multi: When the user clicks one of the options, this option toggles between active and inactive (pressed and not pressed), without affecting the other options. In multi selection mode, all options can be active or inactive simultaneously.

Behavior in single selection mode – live example

Behavior in multi selection mode – live example

Related Links

The responsive popover displays as a popover on desktop and tablet devices but as a dialog on phones.

Responsive popover – live example

When to Use

Use the responsive popover:

• To define your own structure.
• To show a dialog on phones.

Don’t use the responsive popover:

• To show a popover on phones. Use the popover component instead.

Anatomy

Popover (Desktop, Tablet)

1. Title (optional): Including a title also improves accessibility for screen reader users.
2. Content area:  Can contain any component. Ensure that the content has a basic design and shows only the most important information.
3. Arrow (optional, desktop/tablet only): By default, the popover has an arrow that connects it visually to the triggering component. You can opt to hide the arrow.
4. Footer (optional): Contains one or more actions.

Behavior and Interaction

See Popover – Behavior and Interaction.

Responsive Behavior

On a phone, the responsive popover displays as a dialog.

Related Links

A range slider enables the user to select a value range within a given numeric interval.

Range slider – live example

When to Use

Use the range slider:

• To provide graphical support for selecting a value range within a given numeric interval.

Don’t use the range slider:

• If the user only needs to select a single value within a predefined range. Use the slider instead.

Anatomy

1. Start point: Minimum value of the slider range.

2. Track (active or inactive)

3. Focused slider handle: Active handle for setting the value in focus.

4. Non-focused slider handle: Inactive handle indicating the other selected value.

5. Tooltip (optional): Displays a tooltip with the current value above the handle.

6. Tick marks (optional): Visualize the value intervals (steps). Each tick mark represents a selectable value.

7. Labels (optional): Labels some or all of the tick marks with their values.

8. End point: Maximum value of the slider range.

Variants

The following range slider variants are available:

Basic range slider

Disabled range slider

Range slider with tooltip

Range slider with tooltip, tick marks, and labels

Behavior and Interaction

Changing the Value Range

If the range slider is editable, the hand cursor appears when the user hovers over the range slider. If tooltips have been activated, hovering over the slider also displays tooltips showing the current values for each handle. The handles move together with the corresponding tooltips.

The user can change the value range on the slider:

• By using drag and drop to adjust the handles. The handle snaps to the nearest incremental value.
• By clicking the track outside the selected value range. The corresponding handle then moves to the new position.
• By using the key combination Ctrl/Cmd + Arrow keys.

Range slider with tooltip, tick marks, and labels – live example

Moving the Entire Range

Users can move the entire value range by dragging and dropping the active segment of the track.

Equal Values

The handles of the range slider can be positioned on the same value.

Overlapping

The handles of the range slider can be moved across each other. The minimum can become the maximum, and vice versa.

Responsive Behavior

Related Links

Radio buttons provide users with a set of mutually exclusive options. They allow users to select only one option from two or more choices. Each option is represented by a radio button.

Different radio button states – live examples

When to Use

Use radio buttons:

• To choose quickly between at least two clearly distinct alternatives.
• For single-selection scenarios only.

Don’t use radio buttons:

• For multiple-selection scenarios. Use checkboxes instead.
• To select list items.
• To offer more than 8 options. Use a dropdown box or list view instead.
• To offer only two mutually exclusive options. In this case, combine them into a single checkbox or toggle button. For example, use a checkbox for “I agree”.
• To offer options that are numbers with fixed intervals. Use a slider instead.

Anatomy

The radio button comprises two parts:

1. Button: Indicates whether the option is selected.
2. Text: Describes the purpose of the radio button. The text is optional if the purpose of the radio button is already indicated by other elements.

Behavior and Interaction

The user can select a radio button by clicking on the button or the content. Note that clicking again on a checked option does not uncheck it. However, clicking on a different option transfers selection to that option. The user can select only one option from a group of radio buttons.

Radio button – live example

Related Links

The progress indicator visualizes the current advancement of a process or a degree of accomplishment.

Progress indicator (progress at 0%, 60%, and 100%)

When to Use

Use the progress indicator:

• To show an ongoing process and provide an estimate of how long it will still take.
• To show the current status visually.
• To emphasize the current status visually.
• To help users compare different states easily on the fly.
• To show custom values or percentages.

Don’t use the progress indicator:

• If visual feedback is needed for an ongoing operation. Use a busy indicator instead.

• If the progress is indeterminate. Use a busy indicator instead.

Anatomy

The progress indicator component consists of the following parts:

1. Text: Describes the current status. If no specific text is provided, the percentage value is displayed by default. You can also opt to hide the text.
2. Start/end indicator: Indicates the start and end points of the progression.
3. Track: Track representing the entire progression from start to finish.
4. Progress bar: Bar representing the current progress, based on the percentage value.
5. Icon (semantic states only): Additional indicator showing the value state as an icon.

Semantic States

Use the progress indicator to add clarity and weight to an important state that needs to be perceived very quickly.

Progress indicator used to display a status

The progress indicator can be used with value state to indicate the semantic meaning.

Progress Indicator value states (from top to bottom: None, Error, Warning, Success, Information)

Related Links

A popover is a small overlay window that appears on top of the existing content. It is used to provide additional information and options without requiring the user to navigate away from the current page or interrupt their workflow.

Popover –  live example

When to Use

Use a popover:

• If you need to define your own structure.
• If you have very little content.

Don’t use a popover:

• If the content takes up more than a third of the screen real estate on phones. Use the responsive popover instead.
• To show details for a list item in list-detail layouts.
• If a user action or confirmation is required before processing can continue. In this case, use a dialog.

Anatomy

1. Title (optional): Including a title also improves accessibility for screen reader users.
2. Content area:  Can contain any component. Ensure that the content has a basic design and shows only the most important information.
3. Arrow (optional): By default, the popover has an arrow that connects it visually to the triggering component. You can opt to hide the arrow.
4. Footer (optional): Contains one or more actions.

Behavior and Interaction

Opening and Closing a Popover

The popover opens when the user clicks on a triggering text link or button. The popover appears next to the trigger component, but doesn’t obscure it.

The popover closes when the user clicks outside the popover or selects an action within the popover.

Opening and closing a popover – live example

Placement Types

You can define how the popover is positioned in relation to its trigger.

Available options:

• Left
• Right (default)
• Top
• Bottom

The position and direction of the arrow adapt to the placement type.

Popover to the right of the trigger (default), arrow hidden – live example

Popover beneath the trigger, with arrow – live example

Responsive Behavior

The popover component always shows a popover, regardless of the form factor. Only use a non-responsive popover if it has very little content. On smartphones, the popover should not use more than a third of the phone’s real estate. If you need to include more content, use a responsive popover.

Related Links

The panel is a responsive container for grouping and displaying information. You can use it to structure content on a page. To save space, you can make the content area collapsible.

Expandable panel – live example

When to Use

Use the panel:

• To group information.
• To give users the option of hiding this information.
• To show additional information on demand.

Don’t:

• Nest panels.
• Stack too many panels on one page.

Anatomy

1. Header area: By default, the header is clickable and can be used to toggle between the expanded and collapsed state.

1. 1. Icon: Used to expand and collapse the content area. The icon rotates when the panel is expanded (arrow points down) or collapsed (arrow points right).
      Note: If the panel is fixed, no icon is shown.

1. 2. Title: Title bar with a header text or custom header.

1. 3. Custom header (optional): Title, buttons or any other HTML elements.

2. Content area: The content area can contain any component or set of components.

Variants

Standard Panel

Panel with Custom Header

Fixed Panel

Behavior and Interaction

See the variants for the standard panel and panel with custom header.

Responsive Behavior

If the width of the panel is set to 100% (default), the panel and its contents are resized responsively, depending on its parent container.

If the panel has a fixed height, it will take up the designated space even if the panel is collapsed.

Truncation

When the space for the header title is not enough, the title truncates. The content wraps.

Panel with truncated title

Related Links

The page is a container component for a full application screen comprising a header, content area, and footer.

Page – live example

When to Use

Use the page as a base for any screen you need for your application.

Anatomy

1. Header
   1. Home icon
   2. Title
   3. Button
2. Content
3. Footer (optional). The footer can float or be fixed at the bottom of the page.
   4. Button

Variants

The page can have a floating or fixed footer bar.

Behavior and Interaction

The page itself has no specific interactions. All interactions belong to the components within the page container and depend on the application use case.

For details, see the guidelines for the individual components, such as the button.

Responsive Behavior

The page offers considerable freedom and flexibility and the page header and the footer are designed to adapt automatically to small, medium, and large screen sizes.

• The title truncates if needed.
• The actions in the header and in the footer should stay as long as possible but when the space is not enough, they should transform to an overflow menu from right to left.
• If a priority is set to the actions, the highest priority button is the last to move to the overflow menu.
• It is also possible to assign one button never to move to the overflow menu.

Letterboxing is used to limit the width of the content area to 1280 px. This prevents the app content from becoming too “stretched” on wide screens, and optimises readability. Letterboxing can be used if the use case requires it. However, most business apps offer so much content that the page is typically shown across the entire screen, without letterboxing.

The page supports both cozy and compact mode.

Globalization and Localization

When designing an application, have in mind that this component also can be used with languages that use right-to-left direction for writing and reading. In this case the UI should be mirrored in order to be more convenient for the users to interact with it.

Page in RTL mode – live example

Related Links

The multi combobox component enables users to select options from a predefined list or enter a custom text.

It provides an editable input field to filter the list and a dropdown arrow to open the list of available options. The select options in the list have checkboxes that permit multiple selection.

Multi combobox – live example

When to Use

Use the multi combobox:

• To select one or more options from a long list of options (no more than ~200).
• If the values in the option list contain secondary information that doesn’t need to be displayed right away.

Don’t use the multi combobox:

• To select multiple ranges.
• To select or search multiple business objects.
• To select an item from a short list of items.
• If you want to let users add custom values. Consider using the multi input instead.
• If the list contains more than ~200 items.

Anatomy

1. Text: Placeholder or typed text
2. Input field: Area for displaying tokens and typing text.
3. Arrow button: Opens a dropdown list with the values that can be added as tokens.
4. Tokens: Show individual selected values.
5. Overflow button: Show all selected values.

1. 1. n More: Appears after the last visible token. The count n indicates how many other values are selected.

1. 2. n Items: Appears if no tokens fit into the input field. The count n indicates how many values are selected overall.

Variants

Grouped Items

Multi combobox with grouped items

Predefined Options Only

The user can only write text that matches a predefined value in the list. The text must start with the first letter of a value. If the user types something that doesn’t match one of the options, the multi combobox switches to an error state.

Multi combobox with predefined options only – live example

With Free Text Input

The user also has the option of entering a freestyle text. If the text doesn’t match one of the available options, no token is created and the text is displayed directly in the input field.

Multi combobox with free text input – live example

Behavior and Interaction

Select

To select values, users can:

• Click the dropdown arrow and select the relevant options from the list.
• Start to type a value and then select the proposed option.

The selected options then appear as tokens in the input field. If there isn’t enough space to display all the tokens, an overflow button appears (n More, or n Items).

Empty multi combobox – live example

Adjust Selection

To view the selected options, users can:

• Click the arrow button to display the full selection list (both selected and non-selected items).
• Click the overflow button n More or n Items (if shown) to view all the selected items.

To remove an item from the selection, users can

• Click the “X” icon in the token.
• Focus on the token to select it and use the keyboard delete key to remove the token.

Multi combobox with multiple tokens – live example

Globalization and Localization

The multi combobox supports left-to-right (LTR) and right-to-left (RTL) reading directions.

Related Links

A menu offers the user a list of alternative actions. The actions can also be grouped in submenus.

Menu – live example

When to Use

Use the menu:

• If you need to offer more than one action.
• If users need to stay in a certain context.
• If there are only a small number of actions.

Don’t use the menu:

• To provide only one option. Use a button instead.
• If users would benefit more from a split button, which offers an easy-to-access default action, with the option to select other actions.

Anatomy

Menu

1. Menu: Container that is shown as an overlay.
2. Menu item: List item inside the menu that represents an action.
3. Separator (optional): Horizontal line that groups the menu items visually.

Menu Item

1. Text: Describes the action that is triggered by the menu item. The text is mandatory.
2. Icon (optional): Visualizes the action that is triggered by the menu item.
3. Additional text (optional): Provides additional information relating to the menu item (such as shortcuts).
4. Navigation indicator: Indicates that a submenu is available for the menu item.

The visualization of the menu item adapts automatically, depending on which elements are included.

Variants

The menu can be basic, with only a single list of options, or can contain menu items with submenus.

The elements within a menu item can be combined in various ways. The minimal variant is to show only a text. If a menu item has subitems, an additional text won’t be shown, since the space is needed for the navigation indicator.

Variants Without Icons

• Text only
• Text and additional text
• Text and navigation indicator (subitems)

Menu item variants without icons – live examples

(from top to bottom: text only, with additional text, with navigation indicator)

Variants with Icons

• Icon and text
• Icon, text, and additional text
• Icon, text, and navigation indicator (subitems)

Menu item variants with icons – live examples

(from top to bottom: icon and text only, with additional text, with navigation indicator)

Behavior and Interaction

Initially, the menu is closed and therefore not visible.

• Clicking the reference control opens the menu (for example, a menu button).
• Clicking a menu item without submenu indicator triggers the respective action.
• Clicking a menu item with a submenu indicator opens the submenu next to the main menu. The cursor can now be moved to the submenu while all other levels remain open. For each submenu, the same navigation principles apply as for the main menu. Multiple submenus are possible.
• Clicking outside the component closes the menu.

Menu behavior and interaction – live example

Related Links

When to Use

Use the message strip:

• To provide information related to the object as a whole in the object header, such as the object status.
• To provide information within the detail area of an object.
• To inform the user about a status of an object.
• To warn the user about an issue.

Don’t use the message strip:

• In the list of a list-detail layout.
• Above the page header.

Anatomy

1. Container: Holds the icon, message text, and Close button.
2. Icon (optional): Visual indication of the message type. By default, the message strip uses standard icons for error, warning, success, and information messages.
   We strongly recommend displaying an icon. If you decide to remove it, include an additional text to indicate the message type.
3. Text: Message text. To preserve the intended design, we strongly recommend using only text for the message itself.
4. Close button (optional): Allows the user to remove the message strip from the UI.

Variants

You can use the message strip with or without an icon or Close button. If necessary, you can also configure a custom message strip.

With Icon and Close Button

Message strip with icon and ‘Close’ button

With Icon, Without Close Button

Message strip with icon, without ‘Close’ button

Without Icon, With Close Button

Message strip without icon, with ‘Close’ button

Without Icon or Close Button

Message strip without an icon or ‘Close’ button

Custom MessageStrip

Behavior and Interaction

Responsive Behavior

The message strip is fully responsive. Message type icons always display on the left, while the Close icon always displays on the right. Text that exceeds the available width wraps to the next line.

If you place the message within the detail area for an object, it always uses 100% of the available width and reacts to the responsiveness of the container.

Message strip examples with wrapped text

Content Density

Globalization and Localization

For right-to-left languages, such as Arabic or Hebrew, the message strip is mirrored.

Related Links

You can use the list component to display different types of list item. Each list item can include an image, text, icon, or other HTML content. List items can also be grouped.

The list component comes with built-in selection and deletion modes, as well as configurable separators.

List – live example

When to Use

Use the list:

• To display a homogeneous set of basic data.
• To display a single-level hierarchy.
• If a table would be too complex.

Don’t use the list:

• To manage complex datasets. In this case, use a table.
• If you work with complex hierarchies. In this case, use a tree.

Anatomy

List

1. Header: The first item of the list serves as a header. The header contains the title of the list.
2. Footer: If the footer element is used, the footer is the last item in the list.
3. Separator: The list item separators are customizable.

Standard List Item

The standard list item is the simplest type of list item. It provides elements for the most common use cases, such as image, text, and icon.

1. Image
2. Text
3. Icon / additional text:
   a. Icon: You can use the iconEnd property to place an icon at the end of an item.
   b. Additional text: You can use the additionalText property to display an additional text at the end of a row. The additionalTextState property applies a semantic state to this text.

Custom List Item

You can use the custom list item component within the list in the same way as a standard list item. The custom list item component accepts arbitrary HTML content to allow full customization.

Group Header List Item

The group header list item is a special list item, used only to separate other list items into logical groups.

Variants

The following list variants are available to support different use cases:

List Structure

Standard list

Growing list

List with image content

List item separators

List with group headers

Processing Modes

Single selection mode

Multiple selection mode

Delete mode

List Status

Busy

No data

Standard List

Use this variant as a starting point.

Standard list – live example

Growing List (Scroll)

Use this variant if there are too many list items to show in the visible space. You can display a More button or let the user scroll within the list to show more items. By default, growing is switched off.

Growing list with scrollbar – live example

List with Image Content

You can use the imageContent slot to add an image or avatar to the item.

List items using the image content slot to display avatars

List Item Separators

By default, horizontal separators are displayed between all list items. Alternatively, you can remove all separators, only show separators between items (inner separators).

List item separation types

List with Group Headers

Use this variant if you want to group items in the list.

List with group headers

Single Selection Mode

Allows users to select only one item at a time.

Single selection mode – live example

Multiple Selection Mode

Allows users select more than one item at once using the checkboxes on the left.

Multiple selection mode – live example

Delete Mode

Use this variant to show an icon for deleting or removing an item.

Delete mode with ‘X’ icon – live example

Busy List

Use this variant to indicate that the list is fetching data.

Busy list – live example

List with No Data

Use this variant to show a text when the list is empty.

List with no data

Behavior and Interaction

See the examples for the following variants:

• Standard list
• Single selection mode
• Multiple selection mode

Responsive Behavior

Wrapping and Truncation

By default, texts in a list item are truncated if there isn’t enough space.

List item with long title, description, and additional text

List item with truncated text

Related Links

A link (also known as a hyperlink) is an interactive text element.

Visualization of different link types – live example

When to Use

Use the link:

• To navigate to another page.
• To trigger an event.

Don’t use the link:

• To trigger an action. Use a button instead.
• If there is no link target.

Anatomy

A link is an interactive element in text that is indicated by colored text or an underline.

1. Text
2. Underline

Variants

There are three different link variants:

• Default: To display a simple link.
• Emphasized: For very important links that need to attract the user’s attention quickly.
• Subtle: To distinguish between more important (default) and less important (subtle) links when the app page contains a large number of links (10+). Subtle links allow you to improve the visual hierarchy in large lists and tables.

Link variants – live examples

Behavior and Interaction

To trigger the event or navigation, the user clicks the link.
If a link target has a specified URL, it can also be triggered via the context menu.

If the link can’t be triggered, display it in the disabled state. For example, if a content area is disabled, also show the links in this area as disabled.

A default link and a disabled link – live examples

Related Links

A label is the name assigned to a component or a group of related components. Alternatively, a label can describe the purpose of a component or group of related components.

Labels with input fields – live example

When to Use

Use the label:

• If you need a label for a component or group of components.
• In forms.

Don’t use the label:

• For the column header of a table. Use the title instead.

Anatomy

1. Text: Describes the data displayed or expected in the corresponding component or group of components.
2. Colon: The colon (:) follows the label text.
3. Asterisk (optional): The asterisk (*) indicates that user input is required.

Variants

Label: The default label comes without the optional “Required” indicator. The user can continue without providing input in the corresponding component or components.

Label for Required Entry (optional): The label shows the “Required” indicator (*) after the colon. To continue, the user must provide input in the corresponding component or components.

Default label, label for a required entry

Responsive Behavior

Wrapping and Truncation

Labels can be wrapped and truncated, depending on the use case.
For labels within forms, use wrapping instead of truncation.
Do not use wrapping to enable long labels. Instead, keep your labels short: a label is not a help text. It must be meaningful, succinct, short, and descriptive.

Labels in a form – live example

Related Links

An input allows users to enter and edit text or numeric values in one line.

Input – live examples

When to Use

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

Anatomy

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.

Dropdown Areas

The input component provides two types of dropdown area:

• An area for suggestions, which is triggered by typing.
• An area for value help, which is triggered by the respective icon button.

Variants

Value Help

To help the user find the correct value, you can add a value help option. A small value help icon ( ) 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.

Input with value help

Input with a Label

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.

Input with a label

Input as a Search

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.

Input as a search field

Behavior and Interaction

Enabled, Read-Only, and Disabled States

An input can have three states:

Enabled

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.

Input – enabled

Read Only

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.

Input – read only

Disabled

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.

Input – disabled

Suggestions and Autocomplete

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.

Input with suggestions

Clear

You can enable a Clear icon ( ) 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.

Input with ‘Clear’ icon – live example

Responsive Behavior

If the user clicks the input on a mobile device in cozy mode, a new full screen dialog opens.

Globalization and Localization

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

Input with right-to-left text display

Related Links