@ui5/webcomponents

UI5 Web Components - Main

Provides general purpose UI building blocks such as buttons, labels, inputs and popups.

Provided components

Web Component	Tag name	Module import
Avatar	ui5-avatar	import "@ui5/webcomponents/dist/Avatar.js";
Avatar Group	ui5-avatar-group	import "@ui5/webcomponents/dist/AvatarGroup.js";
Badge	ui5-badge	import "@ui5/webcomponents/dist/Badge.js";
Breadcrumbs	ui5-breadcrumbs	import "@ui5/webcomponents/dist/Breadcrumbs.js";
Breadcrumbs Item	ui5-breadcrumbs-item	comes with ui5-breadcrumbs
Badge	ui5-badge	import "@ui5/webcomponents/dist/Badge.js";
Busy Indicator	ui5-busy-indicator	import "@ui5/webcomponents/dist/BusyIndicator.js";
Button	ui5-button	import "@ui5/webcomponents/dist/Button.js";
Calendar	ui5-calendar	import "@ui5/webcomponents/dist/Calendar.js";
Calendar Date	ui5-calendar-date	comes with ui5-calendar
Card	ui5-card	import "@ui5/webcomponents/dist/Card.js";
CardHeader	ui5-card-header	import "@ui5/webcomponents/dist/CardHeader.js";
Carousel	ui5-carousel	import "@ui5/webcomponents/dist/Carousel.js";
Checkbox	ui5-checkbox	import "@ui5/webcomponents/dist/CheckBox.js";
Color Palette	ui5-color-palette	import "@ui5/webcomponents/dist/ColorPalette.js";
Color Palette Item	ui5-color-palette-item	comes with ui5-color-palette
Color Palette Popover	ui5-color-palette-popover	comes with ui5-color-palette-popover
Color Picker	ui5-color-picker	import "@ui5/webcomponents/dist/ComboPicker.js";
ComboBox	ui5-combobox	import "@ui5/webcomponents/dist/ComboBox.js";
ComboBox Item	ui5-cb-item	comes with ui5-combobox
ComboBox Group Item	ui5-cb-group-item	comes with ui5-combobox
Date Picker	ui5-date-picker	import "@ui5/webcomponents/dist/DatePicker.js";
Date Range Picker	ui5-daterange-picker	import "@ui5/webcomponents/dist/DateRangePicker.js";
Date Time Picker	ui5-datetime-picker	import "@ui5/webcomponents/dist/DateTimePicker.js";
Dialog	ui5-dialog	import "@ui5/webcomponents/dist/Dialog.js";
File Uploader	ui5-file-uploader	import "@ui5/webcomponents/dist/FileUploader.js";
Icon	ui5-icon	import "@ui5/webcomponents/dist/Icon.js";
Input	ui5-input	import "@ui5/webcomponents/dist/Input.js";
Label	ui5-label	import "@ui5/webcomponents/dist/Label.js";
Link	ui5-link	import "@ui5/webcomponents/dist/Link.js";
List	ui5-list	import "@ui5/webcomponents/dist/List.js";
List - Standard Item	ui5-li	import "@ui5/webcomponents/dist/StandardListItem.js";
List - Custom Item	ui5-li-custom	import "@ui5/webcomponents/dist/CustomListItem.js";
List - Group Header Item	ui5-li-groupheader	import "@ui5/webcomponents/dist/GroupHeaderListItem.js";
Menu	ui5-menu	import "@ui5/webcomponents/dist/Menu.js";
Message Strip	ui5-message-strip	import "@ui5/webcomponents/dist/MessageStrip.js";
Multi ComboBox	ui5-multi-combobox	import "@ui5/webcomponents/dist/MultiComboBox.js";
Multi ComboBox Item	ui5-mcb-item	comes with ui5-multi-combobox
Multi ComboBox Group Item	ui5-mcb-group-item	comes with ui5-multi-combobox
Multi Input	ui5-multi-input	import "@ui5/webcomponents/dist/MultiInput.js";
Panel	ui5-panel	import "@ui5/webcomponents/dist/Panel.js";
Popover	ui5-popover	import "@ui5/webcomponents/dist/Popover.js";
ProgressIndicator	ui5-progress-indicator	import "@ui5/webcomponents/dist/ProgressIndicator.js";
Radio Button	ui5-radio-button	import "@ui5/webcomponents/dist/RadioButton.js";
Range Slider	ui5-range-slider	import "@ui5/webcomponents/dist/RangeSlider.js";
Rating Indicator	ui5-rating-indicator	import "@ui5/webcomponents/dist/RatingIndicator.js";
Responsive Popover	ui5-responsive-popover	import "@ui5/webcomponents/dist/ResponsivePopover.js";
Segmented Button	ui5-segmented-button	import "@ui5/webcomponents/dist/SegmentedButton.js";
Segmented Button Item	ui5-segmented-button-item	comes with ui5-segmented-button
Select	ui5-select	import "@ui5/webcomponents/dist/Select.js";
Select Option	ui5-option	comes with ui5-select
Slider	ui5-slider	import "@ui5/webcomponents/dist/Slider.js";
Split Button	ui5-split-button	import "@ui5/webcomponents/dist/SplitButton.js";
Step Input	ui5-step-input	import "@ui5/webcomponents/dist/StepInput.js";
Suggestion Item	ui5-suggestion-item	comes with InputSuggestions.js feature - see below
Switch	ui5-switch	import "@ui5/webcomponents/dist/Switch.js";
Tab Container	ui5-tabcontainer	import "@ui5/webcomponents/dist/TabContainer.js";
Tab	ui5-tab	import "@ui5/webcomponents/dist/Tab.js";
Tab Separator	ui5-tab-separator	import "@ui5/webcomponents/dist/TabSeparator.js";
Table	ui5-table	import "@ui5/webcomponents/dist/Table.js";
Table Column	ui5-table-column	import "@ui5/webcomponents/dist/TableColumn.js";
Table Row	ui5-table-row	import "@ui5/webcomponents/dist/TableRow.js";
Table Group Row	ui5-table-group-row	import "@ui5/webcomponents/dist/TableGroupRow.js";
Table Cell	ui5-table-cell	import "@ui5/webcomponents/dist/TableCell.js";
Textarea	ui5-textarea	import "@ui5/webcomponents/dist/TextArea.js";
TimePicker	ui5-time-picker	import "@ui5/webcomponents/dist/TimePicker.js";
Title	ui5-title	import "@ui5/webcomponents/dist/Title.js";
Toast	ui5-toast	import "@ui5/webcomponents/dist/Toast.js";
Toggle Button	ui5-toggle-button	import "@ui5/webcomponents/dist/ToggleButton.js";
Token	ui5-token	comes with ui5-multi-input
Tree	ui5-tree	import "@ui5/webcomponents/dist/Tree.js";
Tree Item	ui5-tree-item	comes with ui5-tree

Provided assets

import "@ui5/webcomponents/dist/Assets.js";

Assets	Module	Notes
i18n, themes	@ui5/webcomponents/dist/Assets.js	Theming parameters and translations for the components Automatically imports also: @ui5/webcomponents-localization/dist/Assets.js and @ui5/webcomponents-theming/dist/Assets.js

Provided features

import "@ui5/webcomponents/dist/features/<FEATURE-NAME>.js

Affects	Feature Import	Description
ui5-color-palette	@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js	Support for "more colors dialog" for the color palette component
ui5-input	@ui5/webcomponents/dist/features/InputSuggestions.js	Support for input suggestions while typing
Multiple (ui5-input, ui5-date-picker, etc...)	@ui5/webcomponents/dist/features/InputElementsFormSupport.js	Support for using input components in forms

Color Palette "More Colors" Feature

import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js";

The ui5-color-palette component has a showMoreColors property, that, when set to true, enables a "More colors" dialog. Since this is not always needed, in order to use this dialog, you must import the above feature.

Input Suggestions Feature

import "@ui5/webcomponents/dist/features/InputSuggestions.js";

The <ui5-input> element acts as an <input> with the Fiori design and added functionality, such as value state.

The so-called "input suggestions" is an advanced feature that allows the user to choose from a list of predefined options while typing. Since input suggestions may not always be needed, they do not come as part of the <ui5-input> itself.

To enable the functionality, import the above module into your app. This will also automatically import ui5-suggestion-item for your convenience.

Form Support Feature

import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";

HTML <form> only submits a couple of standard HTML elements such as <input> and <textarea> to name a few.

Web Components that function as inputs, such as UI5's <ui5-input>, <ui5-checkbox>, <ui5-textarea> are therefore not submitted by the form out of the box.

Generally, this is not an issue, as very few modern applications submit forms in the classic way.

However, if you need to submit forms, you can import the module above, and it will enrich:

• ui5-input
• ui5-textarea
• ui5-checkbox
• ui5-radio-button
• ui5-date-picker
• ui5-select

with functionality, allowing them to be submitted in forms (provided you set their name attribute) just as any standard HTML input element would be.

How to submit a form

There are two ways of submitting a form:

1. The ui5-button element will be able to submit the closest form it's placed in, provided you set its submits attribute.
2. Pressing Enter while a form control is focused. (Note: ui5-textarea is the only exception. If Enter is pressed while ui5-textarea is focused, it will result in a new line).

Resources

• UI5 Web Components - README.md
• UI5 Web Components - Home Page
• UI5 Web Components - Playground and API Reference

Support

We welcome all comments, suggestions, questions, and bug reports. Please follow our Support Guidelines on how to report an issue, or chat with us in the #webcomponents channel of the OpenUI5 Community Slack.

Contribute

Please check our Contribution Guidelines.

License

Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the LICENSE file.