@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";
Tag	ui5-tag	import "@ui5/webcomponents/dist/Tag.js";
Bar	ui5-bar	import "@ui5/webcomponents/dist/Bar.js";
Breadcrumbs	ui5-breadcrumbs	import "@ui5/webcomponents/dist/Breadcrumbs.js";
Breadcrumbs Item	ui5-breadcrumbs-item	comes with ui5-breadcrumbs
Tag	ui5-tag	import "@ui5/webcomponents/dist/Tag.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/ListItemStandard.js";
List - Custom Item	ui5-li-custom	import "@ui5/webcomponents/dist/ListItemCustom.js";
List - Group Item	ui5-li-group	import "@ui5/webcomponents/dist/ListItemGroup.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 Item Group	ui5-mcb-item-group	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";
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

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.

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.

Changelog

2.3.0 (2024-10-02)

Bug Fixes

• patchPopup now assumes that content may be null (#9950) (3330f01)
• ui5-bar: provide responsive paddings support (#9820) (7d9cb85), closes #7359
• ui5-dynamic-page: action buttons reading fix (#9858) (c850ff1)
• ui5-popover: popover arrow is aligned to the middle of the opener (#9938) (31c125d)

Features

• framework: introduce the i18n decorator and the cldr option (#9897) (1f29d23)
• ui5-carousel: on touch devices navigation arrows are always visible (#9939) (8072baf)
• ui5-dynamic-page-title: implement snapped title on mobile (#9898) (b8b9a98)
• ui5-input: enable preventing input event (#9930) (2d19119), closes #9884
• ui5-table: adding horizontal column alignment (#9639) (65f75eb)