React Components
65 Components
WaveMaker provides prebuilt React based components with advanced capabilities like props, callback events, data binding, and extensive styling support. These ready-to-use components can be seamlessly integrated into your web applications using a simple drag-and-drop interface within WaveMaker Studio.
Storybook
For more details on how to use the components, and try them in an interactive way, please refer to the Storybook.
Data Components
Form is a group of input elements put together to post data, typically updating data through a web service call
List is a widget that presents a list view of data, which contains a template for designing each list item
Cards is a single unit of content or functionality, presented in a concise visual package, to easily update, maintain, and personalize content area.
Live Form is a group of input elements put together to submit data, typically resulting in creating or updating a database row
Container Components
Accordion is a stacked list of UI components, with only one component expanded or viewed at any point in time, and the rest collapsed
Panel has designated sections such as header, body, and footer and can be used to group a set of widgets together.
Linear Layout is a layout that arranges its children in a single column or row, either vertically or horizontally.
Tile is a form of UI components to group a set of widgets together and to apply a uniform style to the content
Form Components
Button is a control that can be clicked to perform an action.
Calendar widget allows the user to select a date from the calendar displayed.
Checkbox allows the user to choose one or multiple of a predefined set of options.
CheckboxSet is the arrangement of checkbox widgets grouped together.
Chips allow user to search data and add, delete and edit the same.
Color Picker widget is to select the color and translate to a hex value.
Composite widget allows combining multiple input widgets into a single composite value.
Currency is a special text widget to input the currency type data, with the display format based on the currency type.
Date widget helps to select a date from a calendar within the date range.
Datetime is a composite widget of date and time widgets.
FileUpload is a widget that pops up a file browsing window to select files and upload.
Number allows input of a number. It works with the selected app Locale and displays the number localized format.
Radioset is the arrangement of radio widgets grouped together.
Rating Widget allows users to input ratings as data.
Select provides a drop-down list that with a list of items a user can select from.
Slider is a widget control with a handle that can be moved right and left (horizontal slider) on a bar to select a value from within the range of allowed values.
Switch widget can help switching between 3 or more different options by pressing a single key.
Text allows input of a single line of text.
Textarea allows for multiple rows of data to be shown and entered.
Time widget helps to select a time from within a specified time range.
Basic Components
Anchor is used as a navigation link within the app or an external URL.
Audio widget is to embed an audio player into the project.
HTML is a widget to display HTML content or to render the text content using HTML.
Icon widget is for displaying a comprehensible symbol or graphic.
Iframe is a widget to display a web page content in a separate frame, without affecting the current page content or styles.
Label is a uneditable text as a heading or to describe another widget.
Message is a widget to display success, info, loading, error or warning messages to the user.
Picture is a widget to display images in the project.
Progress Bar is an actual indicator of activity progress with time/percentage.
Progress Circle is an actual indicator of activity progress with time/percentage.
Richtext Editor is an input control for formatted text content, optionally including media (WYSIWYG).
Search within a data source and give results.
Spinner is a widget for a visual indicator of activity in progress.
Tree widget can be used to display data in a hierarchical format.
Video is a widget to embed a media player into the project.
Chart Components
Column charts display vertical bars going across the horizontal axis.
Area chart is a line chart with the areas below the lines filled.
Pie chart is a type of graph in which a circle is divided into sectors that each represent a proportion of the whole.
Bar chart presents grouped data with horizontal bars with lengths proportional to the values that they represent.
Donut is a type of graph in which a circle is divided into sectors that each represent a proportion of the whole, with an inner circle showing summary.
Bubble chart is a type of chart that displays three dimensions of data.
Layout Components
Footer is a layout component that provides a footer section for the application.
Header is a layout component that provides a header section for the application.
LeftNav is a layout component that provides a left navigation panel for the application.
RightNav is a layout component that provides a right navigation panel for the application.
TopNav is a layout component that provides a top navigation bar for the application.
Navigation Components
Dropdown Menu is a pull-down menu interface used for defining navigation structure within the app or for external links.
Popover is a container-type graphical control element that opens in its parent window and blocks any other interaction until selected.
Advanced Components
Carousel displays two or more items either images, text or any content, that transitions in a cyclic order.
Login is used for taking credentials for authentication, embedded within a page.
Marquee is a container to keep scrolling content. The scrolling can be in horizontal or in the vertical direction.
Modal Dialog/Dialog Components
Alert Dialog is a special dialog that is displayed when the user needs to take an immediate action.
Confirm Dialog gives a special dialog box that is displayed which requires user’s consent to complete the action.
Design Dialog gives a small window that communicates information to the user and prompts them for a response. The content of the dialog is customizable.
Iframe Dialog is a dialog box that loads an external webpage.
Page Dialog is a dialog box that loads the partial page content.
Login Dialog is a dialog box that allows you to customize the login dialog.