Explore SAP Fiori

The calendar control lets users select a single date, multiple days, entire weeks, or a date range.

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 color palette allows the user to choose a color from a predefined set of colors.

The color palette popover combines the color palette and color picker.

The color picker popover consists of a color picker within a popover.

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.

Standalone control that offers a choice of absolute and relative dates.

…the examples below, the input field is shown in combination with the tabular autocomplete feature for different device sizes. Note that when tabular suggestions are used, the column headers stay sticky when scrolling within the suggestion list. Size S (Smartphones) Cozy mode: When the user clicks the input field, a…

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.

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

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

The rich text editor is a text input control that lets users format the text and insert different types of elements.

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 single planning calendar displays the calendar of a single person or resource over a day, work week, or week.

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

The upload set control allows users to upload single or multiple files to an SAP Fiori app.