UI Widgets

The Accordion widget contains several panels displayed one under another. These panels can be collapsed or expanded by an end user, which makes this widget very useful for presenting information in a limited amount of space.

The ActionSheet widget is a sheet containing a set of buttons located one under the other. These buttons usually represent several choices relating to a single task.

The Autocomplete widget is a textbox that provides suggestions while a user types into it.

The Box widget allows you to arrange various elements within it. Separate and adaptive, the Box widget acts as a building block for the layout.

The Button widget is a simple button that performs specified commands when a user clicks it.

The ButtonGroup is a widget that contains a set of toggle buttons and can be used as a mode switcher.

The Calendar is a widget that displays a calendar and allows an end user to select the required date within a specified date range.

The CheckBox is a small box, which when selected by the end user, shows that a particular feature has been enabled or a specific option has been chosen.

The ColorBox is a widget that allows an end user to enter a color or pick it out from the drop-down editor.

The ContextMenu widget displays a single- or multi-level context menu. An end user invokes this menu by a right click or a long press.

The DataGrid is a widget that represents data from a local or remote source in the form of a grid. This widget offers such basic features as sorting, grouping, filtering, as well as more advanced capabilities, like state storing, export to Excel, master-detail interface, and many others.

The DateBox is a widget that displays date and time in a specified format, and enables a user to pick or type in the required date/time value.

The DeferRendering is a widget that waits for its content to be ready before rendering it. While the content is getting ready, the DeferRendering displays a loading indicator.

The Diagram widget provides a visual interface to help you design new and modify existing diagrams.

The Drawer is a dismissible or permanently visible panel used for navigation in responsive web application layouts.

The DropDownBox widget consists of a text field, which displays the current value, and a drop-down field, which can contain any UI element.

The DropDownButton is a button that opens a drop-down menu.

The FileManager is a widget that allows users to upload, select, and manage files and directories in different file storages.

The FileUploader widget enables an end user to upload files to the server. An end user can select files in the file explorer or drag and drop files to the FileUploader area on the page.

The FilterBuilder widget allows a user to build complex filter expressions with an unlimited number of filter conditions, combined by logical operations using the UI.

The Form widget represents fields of a data object as a collection of label-editor pairs. These pairs can be arranged in several groups, tabs and columns.

The Gallery is a widget that displays a collection of images in a carousel. The widget is supplied with various navigation controls that allow a user to switch between images.

HtmlEditor is a WYSIWYG editor that allows you to format textual and visual content and to output it in HTML or Markdown. HtmlEditor is built on top of and requires Quill.

The List is a widget that represents a collection of items in a scrollable list.

The LoadIndicator is a UI element notifying the viewer that a process is in progress.

The LoadPanel is an overlay widget notifying the viewer that loading is in progress.

The Lookup is a widget that allows an end user to search for an item in a collection shown in a drop-down menu.

The Map is an interactive widget that displays a geographic map with markers and routes.

The Menu widget is a panel with clickable items. A click on an item opens a drop-down menu, which can contain several submenus.

The MultiView is a widget that contains several views. An end user navigates through the views by swiping them in the horizontal direction.

The NavBar is a widget that navigates the application views.

The NumberBox is a widget that displays a numeric value and allows a user to modify it by typing in a value, and incrementing or decrementing it using the keyboard or mouse.

The PivotGrid is a widget that allows you to display and analyze multi-dimensional data from a local storage or an OLAP cube.

A complementary widget for the PivotGrid that allows you to manage data displayed in the PivotGrid. The field chooser is already integrated in the PivotGrid and can be invoked using the context menu. If you need to continuously display the field chooser near the PivotGrid widget, use the PivotGridFieldChooser widget.

The Popover is a widget that shows notifications within a box with an arrow pointing to a specified UI element.

The Popup widget is a pop-up window overlaying the current view.

The ProgressBar is a widget that shows current progress.

The RadioGroup is a widget that contains a set of radio buttons and allows an end user to make a single selection from the set.

The RangeSlider is a widget that allows an end user to choose a range of numeric values.

The Resizable widget enables its content to be resizable in the UI.

The ResponsiveBox widget allows you to create an application or a website with a layout adapted to different screen sizes.

The Scheduler is a widget that represents scheduled data and allows a user to manage and edit it.

The ScrollView is a widget that enables a user to scroll its content.

The SelectBox widget is an editor that allows an end user to select an item from a drop-down list.

The SlideOut widget is a classic slide-out menu paired with a view. An end user opens the menu by swiping away the view.

The SlideOutView widget is a classic slide-out menu paired with a view. This widget is very similar to the SlideOut with only one difference - the SlideOut always contains the List in the slide-out menu, while the SlideOutView can hold any collection there.

The Slider is a widget that allows an end user to set a numeric value on a continuous range of possible values.

The SpeedDialAction is a button that performs a custom action. It can be represented by a Floating Action Button (FAB) or a button in a speed dial menu opened with the FAB.

The Switch is a widget that can be in two states: "On" and "Off".

The TabPanel is a widget consisting of the Tabs and MultiView widgets. It automatically synchronizes the selected tab with the currently displayed view and vice versa.

The Tabs is a tab strip used to switch between pages or views. This widget is included in the TabPanel widget, but you can use the Tabs separately as well.

The TagBox widget is an editor that allows an end user to select multiple items from a drop-down list.

The TextArea is a widget that enables a user to enter and edit a multi-line text.

The TextBox is a widget that enables a user to enter and edit a single line of text.

The TileView widget contains a collection of tiles. Tiles can store much more information than ordinary buttons, that is why they are very popular in apps designed for touch devices.

The Toast is a widget that provides pop-up notifications.

The Toolbar is a widget containing items that usually manage screen content. Those items can be plain text or widgets.

The Tooltip widget displays a tooltip for a specified element on the page.

The TreeList is a widget that represents data from a local or remote source in the form of a multi-column tree view. This widget offers such features as sorting, filtering, editing, selection, etc.

The TreeView widget is a tree-like representation of textual data.

The ValidationGroup is a widget that allows you to validate several editors simultaneously.

A widget for displaying the result of checking validation rules for editors.

A widget that is used to validate the associated DevExtreme editors against the defined validation rules.

This section lists errors and warnings that may occur in UI widgets.

This section describes components that can be used when defining a widget markup.

The events used to handle user interaction with UI elements.

This section describes the DevExtreme CSS classes you can use to define the appearance of an element.