Widgets

Widgets are the UI building blocks of Appsmith. They empower you to visualise, capture and organise data.

Widget Pane

You can drag UI widgets from the widget pane to the page canvas to start building your application. The widget pane contains 3 types of widgets:

Form Widgets

Form widgets are used to capture data from a user. You can group these widgets inside a container widget to make forms or you can add them to a table to create filters and search boxes.

View Widgets

View widgets are used to display data to a user. These widgets can present data from your APIs in human readable formats. Try connecting your large data sets to your table and see how easy it is to visualise them.

Layout Widgets

Layout widgets are used to organise other widgets into logical groups. Use containers and tabs to make it easy for your users to work with disconnected data on the same screen.

Property Pane

The property pane is the floating control which opens when you select a widget. It allows you to configure various widget properties such as widget's data, its styles and even its behaviour. The property pane is optimised to make widget configuration easy for developers. All input controls in the property pane accept javascript inside the mustache syntax and can be used to accept dynamic data. Try creating an API and binding its data to a table using {{ apiName.data }}

Here is a list of common controls available in the property pane that you can set on various widgets:

Control

Description

Required

Makes an input to the widget required. Disables any form submission until a widget, whose 'Required' control is true, doesn't get a valid input. When true, an asterisk will be displayed next to the label to show that an input to the widget is mandatory.

Visible

Controls widget's visibility on the page. When turned off, the widget gets blurred.

Disabled

Disables input to the widget. The widget will remain visible to the user but a user input will not be allowed.

Enable Scroll

Enables scrolling within a widget's set boundary. It helps you not truncate long text and lets you display it inside a small area on the app. This control is available for Text widget.

Positioning & Sizing

Widgets can be positioned on the canvas by dragging the widget body and dropping it anywhere on the canvas. Widgets can only be placed on top of layout widgets such as containers and tabs.

Selecting a widget enables its resize handles which allows you to change its size. Drag the handles to align the widget to other widgets on the screen. Resizing a widget across another widgets boundary will result in a collision which will cause the resize to fail.

Triggering Actions

Some widgets raise events on different user interactions such as when a button is clicked or when an input text is changed. Developers can use these events to trigger different actions such as APIs. Simply selecting the action type and the action to trigger next to the event that is raised will cause the action to fire when the event is raised. Actions can be chained together by configuring the onSuccess and onError fields of the action. This allows you to navigate to a page on success or show an error message on failure of an API call.

For more complex action chaining, try using a JS function to orchestrate the chaining logic

Container

Containers are used to group widgets together to form logical higher order widgets. Containers let you organize your page better and move all the widgets inside them together.

Property

Description

Allowed Value/s

Background Color

Changes the background color of the container

HTML color name, HEX, RGB, or RGBA

Input

An input text field is used to capture user input. It can be used to configure other settings in the app using {{InputName.Text}}. You can also trigger actions based on changes in the input text.

Property

Description

Label

Sets the label for input. It can be left empty if you don't want any label.

Data Type

Sets the type of data you want to capture in the user input. Selecting a data type will add the associated data validation on the user input. You can select from 5 data types: Text, Number, Password, Phone Number and Email

Placeholder

Sets a placeholder text inside the input. It is generally used to display an expected input or hint to the user.

Default Input

Populates the default text in the input widget. Unless it is changed by the user, the default text value will be captured as the user input.

Regex

Used to add custom validation you want to perform on user input.

Error Message

Sets the text of the error message to display if Regex validation fails.

Action

Description

onTextChanged

Sets the action to be run when user updates the text in the input. Default supported actions are: Call API, Navigate to Page, Navigate to URL or Show Alert.

Text

Text widget is used to display textual information. Whether you want to label a section of the app, write instructions for users or just give a page or a form a heading, text widget will come in handy.

Property

Description

Text

Sets the text to be displayed.

Text Style

Sets the style of the text to be displayed. You can choose among text styles Heading, Label and Body.

Button

Buttons are used to capture user intent and trigger actions based on that intent.

Property

Description

Label

Sets the label of the button.

Button Style

Sets the style of the button. You can choose from three button styles: Primary, Secondary & Danger Button.

Action

Description

onClick

Sets the action to be run when user clicks a button. Default supported actions are: Call API, Navigate to Page, Navigate to URL or Show Alert.

Dropdown

Dropdown is used to capture user input/s from a specified list of permitted inputs.

Property

Description

Label

Sets the label of the dropdown.

Selection Type

Lets you control whether you want the dropdown to be a Single Select or a Multi Select dropdown. Single Select allows users to choose only one value from the list of options whereas Multi Select allows for selection of more than one value by the user.

Options

Lets you set labels and values for different items/options in the list of the dropdown widget.

Default Option

Sets a default option that will be captured as user input unless it is changed by the user.

Action

Description

onOptionChange

Sets the action to be run when a user changes an option. Default supported actions are: Call API, Navigate to Page, Navigate to URL or Show Alert.

Checkbox

Checkbox is a simple UI widget you can use when you want users to make a binary choice.

Property

Description

Label

Sets the label of the checkbox.

Action

Description

onCheckChange

Sets the action to be run when a user changes the choice on the checkbox. Default supported actions are: Call API, Navigate to Page, Navigate to URL or Show Alert.

Radio

Radio widget lets the user choose only one option from a predefined set of options. It is quite similar to a SingleSelect Dropdown in its functionality.

Property

Description

Label

Sets the label of the RadioGroup.

Options

Lets you set labels and values for different options in the option list of the Radio widget.

Default Selected Value

Sets a default value that will be captured as user input unless it is changed by the user.

Action

Description

onSelectionChange

Sets the action to be run when a user changes a selected option. Default supported actions are: Call API, Navigate to Page, Navigate to URL or Show Alert.

Image

Image widget is used to display images in your app.

Property

Description

Image

Renders the image from the URL or the Base64 that you set.

Default Image

Sets a default image, from a URL or a Base64, that will be displayed if no image is rendered via the "Image" property.