Mobile Components
65 Components
WaveMaker provides prebuilt React Native-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 mobile 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
Container is an enclosing element that wraps the widgets placed within, mostly used for embedding partial pages
Grid Layout helps division of pages or content area into cells or grids based on the 12-column fluid grid system, which helps in proper placement of the widgets for responsive design.
Flex Layout is a layout that arranges its children in a single column or row, either vertically or horizontally.
Panel has designated sections such as header, body, and footer and can be used to group a set of widgets together.
Tabs are Multiple UI components placed in a single window, with only one active component and headings allowing navigation to other components
Tile is a form of UI components to group a set of widgets together and to apply a uniform style to the content
Wizard 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.
Button Group is the arrangement of buttons grouped together.
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.
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.
Select Locale Widget is for Language selection from the list of support languages.
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.
Toggle is a widget that can help switching between two different options by pressing a single key.
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.
Icon widget is for displaying a comprehensible symbol or graphic.
Label is a uneditable text as a heading or to describe another widget.
Lottie is a widget to display animations in the project.
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.
Search within a data source and give results.
Spinner is a widget for a visual indicator of activity in progress.
Video is a widget to embed a media player into the project.
Webview is a widget to display a web page content in a page.
Tooltip is a message that appears when a user hovers over, clicks on, or taps an element.
Chart Components
Line chart displays information as a series of data points called 'markers' connected by straight line segments.
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.
Navigation Components
Dropdown Menu is a pull-down menu interface used for defining navigation structure within the app or for external links.
Nav Bar is a grouping of nav widgets for navigation capabilities.
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.
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.
