Skip to main content


Capture a users inputs like search queries, numbers, emails.

Input components are useful for:

  • Capturing user input for Search
  • Capturing user data for a Form Submission

Use input components to allow users to enter information like searching for a user

Set Input label and placeholder text

Input labels and placeholders are used to describe the purpose of the input and the expected input data type to users.

  1. Drag an Input component from the Components panel
  2. In the Properties panel, change the Input Label to Email and change the Placeholder Text to ''

Drag an input component on to the canvas and update the label and placeholder text

Input data types and validation

You can specify the expected data type from the Input component. By selecting the expected Data Type, the input component comes with automatic input validation. For example, if you select the Number Data Type, the input component will restrict the user entry to only numbers. The following data types are supported:

  • Text (Default) – Accepts all characters and stores them as a string type
  • Number – Only accepts digits and stores them as a float type
  • Password – Hides input characters and evaluates input as a string type
  • Email – Validates input is an email and evaluates as a string type

For this guide, set the Data Type to be Email in the Properties panel.

Use the data type property to enforce validation, such as an email

Use Inputs to Filter a table

You can reference the Input data from an API with Javascript code surrounded by double brackets (e.g. {{ Input1.value }}).

Let’s populate a Table with orders placed from an email specified in the Input field.

  1. Drag a Table from the Components panel and rename Table Header to 'Orders'
  2. Remove the example JSON from Table Data and click on Add a new API > [Demo] Orders Postgres DB in the autocomplete
  3. Write a SQL query to fetch all the orders where the email is similar to the Input data.
FROM orders
WHERE user_email LIKE {{'%' + Input1.value + '%'}}

Hint: You can also reference the Input value from any UI components with Javascript code surrounded by double brackets (e.g. {{ Table1.selectedRow.value }})

Next, you can trigger APIs as you are entering new data into the Input field using the onTextChanged event.

Let’s dynamically update the Orders table as users are entering data into the Input field.

  1. Click on the Input component to bring up the Properties Panel
  2. Choose Run API as the Action Type for the onTextChanged trigger and select API1 to run

The table should now dynamically fetch orders as you are entering the user email.

Try it out: You can use as a test email.

Search a table for orders that belong to a user based on the user's entry into an input component

Submit forms when users click a button

You can also use the values from input fields to add new entries to your database. Let’s update this application to allow the submission of new users.

  1. Rename the existing Input component for the user’s email as 'email_input'
  2. Add a new Input component for the user’s first name. Update the label to be 'First Name' and rename the component as 'first_name_input'
  3. Add a new Input component for the user’s last name. Update the label to be 'Last Name' and rename the component as 'last_name_input'
  4. Add a new Button component with the label as 'Submit'

Use input components to collect information from a user, such as first and last name

Next we will need to add an API, called addUser to submit the information into a database table. Write a SQL query to insert a row into the user table using the values from the three Input components. Note: the demo Postgres datastore is read only, you can connect to your own datastore to execute write queries

INSERT INTO users (first_name, last_name, email)
VALUES ({{first_name_input.value}}, {{last_name_input.value}}, {{email_input.value}});

Update the Submit button to run the addUser API when clicked.

Use input components and a button tied to an API to add users to a database

Now you can update the users table with a new user directly from this application. Add a table component that shows the current list of users by using an API to pull the information from the users table.

  1. Add a new API called getUsers to grab all users from the user table with the following SQL query:
SELECT * FROM users;
  1. Remove the example JSON from Table Data and set getUsers.response as the source of data for the table
  2. Update the submit Button component to run the getUsers API after running addUser API

Run APIs in series to get users after the user list is updated when clicking a button

Now when new users are added to your database, the Table component will be updated to show the most current list of users.

Converting Input into a multi-line text area

Multi-line text areas are helpful to allow users to input and edit large texts such as writing comments or reviews.

You can convert a single-line Input into a multi-line text area by simply enlarging the input field with your cursor. Use shift+enter in order to insert a new line into the Input component.

Drag an input component from its bottom edge to resize it allowing it to support multi-line text

Use custom validation rules

Use the .test() method to evaluate an expression to detect the validity of a user's input. For example, for an Input component called Input1, the following regex pattern will validate proper hexadecimal values and throw an error message when invalid:


Use input validation to ensure a proper hexadecimal is passed in

When the user inputs an invalid value, the Custom Error Message will appear alerting the user.

Throw an error when an invalid hexadecimal is passed in

Input Properties

Component Properties

LabelSet the text to be displayed above the input field
Data TypeSet the data type for automatic validation, options are Text, Number, Password, Email
Default ValueSet the default text for the component
Placeholder TextSet a placeholder text for the input
Loading AnimationControls the loading state of the component, values are a boolean
VisibleControls the visibility of the component, values are a boolean
VerticalToggle the location of the label text, values are a boolean
DisabledDisables user interaction with this component, values are a boolean
RequiredMakes filling out this component mandatory, values are a boolean
Minimum LengthMinimum allowable length for the user's input
Maximum LengthMaximum allowable length for the user's input
Custom Error MessageCustom error message to be shown if user's input is invalid
Custom Validation RuleCustom rule that must evaluate to a boolean, will throw the Custom Error Message if false

Settable Properties

Property Via Form / Via RunJSTypeExample Value
Text / textstring"value"

Reference Properties

Properties can be accessed from other frontend components and backend APIs by adding the name of the Input component, and dot referencing the property. For an Input component named Input1:

Input1.valueReturns the current value of the component
Input1.isVisibleReturns the boolean value of the component's visibility (True, if it is visible)
Input1.isDisabledReturns the boolean value of the component's disabled state (True, if it is disabled)
Input1.isValidValidates the input based on the Data Type and Validation Rule, returns a boolean


The following events are triggered by user interactions with Input components. Use event handlers to trigger actions in response to user events.

onTextChangedTriggers an action when the text is changed
onSubmitTriggers an action when the user presses enter/return
onFocusTriggers an action when the input gets focus
onFocusOutTriggers an action when the input loses focus