Explore SAP Fiori

The calendar date interval control displays a range of days in a single row, saving on horizontal space.

A checkbox indicates whether a state is true (checked) or false (unchecked). Users can check multiple options.

The combo box lets users select an item from a predefined list. It has both an input field and a dropdown menu.

The date picker lets users pick a localized date using touch, mouse, or keyboard input.

Users can type in a localized date range manually, or select a date range in the calendar.

The date/time input control allows users to select a combination of date and time.

A combination of controls to input and post plain text, and to display the text alongside the user’s name.

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

The mask input control governs what a user is allowed to enter in an input field.

The multi-combo box lets users select one or more options from a predefined list, and has an input box for filtering.

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

The planning calendar allows users to see parallel appointments and create new events.

Use radio buttons if you want the user to select only one option from a group of mutually exclusive alternatives.

You can use the rating indicator to let users rate content, or to display a content rating.

The search field enables users to search for information or filter data by entering key words as text.

The select control (also known as a dropdown) allows users to select an item from a predefined list.

The select dialog enables users to select one or more items from a comprehensive and searchable list.

A slider is a control that enables the user to adjust single values within a specified numerical range.

The toggle switch mimics a physical switch that allows users to turn things on or off.

This personalization dialog for small tables allows users to show/hide columns, and sort and filter the entries.

The table select dialog is a table-based selection list. It allows you to show comprehensive data for each item.

The text area is an input control that allows the user to enter multiple lines of text.

The time picker allows the user to select a localized time, an exact duration, or a time range (with two time pickers).

Tokens visualize previously selected items, and are similar to tags. Users can add, remove, select, or deselect tokens.

The value help dialog helps the user find and select single or multiple values, based on different attributes.