@ui5/webcomponents
Advanced tools
Provides general purpose UI building blocks such as buttons, labels, inputs and popups.
| 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 |
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 |
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 |
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.
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.
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-inputui5-textareaui5-checkboxui5-radio-buttonui5-date-pickerui5-selectwith functionality, allowing them to be submitted in forms (provided you set their name attribute) just as
any standard HTML input element would be.
There are two ways of submitting a form:
ui5-button element will be able to submit the closest form it's placed in, provided you set its submits attribute.ui5-textarea is the only exception. If Enter is pressed while ui5-textarea is focused, it will result in a new line).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.
Please check our Contribution Guidelines.
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.
FAQs
UI5 Web Components: webcomponents.main
The npm package @ui5/webcomponents receives a total of 30,628 weekly downloads. As such, @ui5/webcomponents popularity was classified as popular.
We found that @ui5/webcomponents demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub postponed a new billing model for self-hosted Actions after developer pushback, but moved forward with hosted runner price cuts on January 1.
Research
Destructive malware is rising across open source registries, using delays and kill switches to wipe code, break builds, and disrupt CI/CD.
Security News
Socket CTO Ahmad Nassri shares practical AI coding techniques, tools, and team workflows, plus what still feels noisy and why shipping remains human-led.