Skip to main content
Version: 2.33.0

Form

The Form component is designed to capture user input. It can act as a parent component to various components such as Text, Text Input, Dropdown and Buttons to initiate specific events. In this document, we'll go through all the configuration options for the Form component.

Form

Restricted components

Components like Kanban, Calendar, Modal, Container, ListView, Tabs, and Form can't be dropped inside the Form component.

Properties

PropertiesDescriptionExpected Value
Button To Submit FormThis dropdown can be used to select a Button that will be used to submit the form.Any button that is a child component inside the Form component
Loading StateLoading state can be used to show a spinner while the content is loaded. Loading state is commonly used with the isLoading property of queries.Use the toggle button or dynamically configure the value by clicking on Fx and entering a logical expression that results in either {{true}} or {{false}}
Use Custom SchemaEnabling this property allows you to provide a schema for the Form component in the JSON format.Switch the toggle or click on Fx to programmatically enable the JSON schema
info

If you need a step-by-step guide on using a Form component, you can checkout this guide.

Using Custom Schema

To provide the form schema in JSON format, we'll pass a JavaScript object with title, properties and submitButton.

KeyDescription
titleThe title key specifies the title of the form.
propertiesThe properties key holds an object that defines the properties of the components that will be inside the form.
submitButtonThe submitButton key holds an object that defines the properties of the Submit Button of the form.

This list provides examples of Custom Schema for all components that can be used in a Form component.

{{
{
title: '', // Provide title for Form
properties: {

}, // Provide schema of the components that will be inside the form
submitButton: {

} // Provide schema of the submit button
}
}}

Here's an example using the custom schema of Text Input, Number Input and Dropdown components:

{{{
"title":"Event Registration",
"properties":{
"textinput1":{
"type":"textinput",
"value":"",
"placeholder":"Enter Full Name",
"label":"Full Name",
"validation":{
"maxLength":30,
"minLength":5
},
"styles":{
"backgroundColor":"#00000000",
"borderRadius":5,
"borderColor":"#4299e1",
"errorTextColor":"#4299e1",
"disabled":false,
"visibility":"true",
"textColor":"#4299e1"
}
},
"numberInput1":{
"type":"number",
"styles":{
"backgroundColor":"#f6f5ff",
"borderRadius":5,
"textColor":"#4299e1",
"borderColor":"#4299e1",
"disabled":false,
"visibility":"true"
},
"value":22,
"maxValue":100,
"minValue":14,
"placeholder":"Enter your age",
"label":"Age"
},
"dropdown1":{
"type":"dropdown",
"values":[
1,
2,
3
],
"displayValues":[
"Male",
"Female",
"Perfer not to Answer"
],
"loading":false,
"value":3,
"label":"Gender",
"styles":{
"disabled":false,
"visibility":"true",
"borderRadius":5,
"borderColor":"#4299e1",
"justifyContent":"center"
}
}
},
"submitButton":{
"value":"Submit",
"styles":{
"backgroundColor":"#3A433B",
"borderColor":"#595959"
}
}
}
}}
Example form schema

Events

To add an event to the Form component, go to the Events section and click on Add handler.

EventDescription
On submitOn submit event is triggered when the submit button on the form component is clicked.
On invalidOn invalid event is triggered when the input on the form is invalid.
info

Check Action Reference docs to get the detailed information about all the Actions.

General

Tooltip

A Tooltip is often used to specify the extra information when the user hovers the mouse pointer over the component. Once a value is set for Tooltip, hovering over the element will display the specified string as the tooltip text.

Tooltip Example

Layout

Show on desktop

Use this toggle to show or hide the component in the desktop view. You can dynamically configure the value by clicking on Fx and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to {{true}} or {{false}}.

Show on mobile

Use this toggle to show or hide the component in the mobile view. You can dynamically configure the value by clicking on Fx and entering a logical expression that results in either true or false. Alternatively, you can directly set the values to {{true}} or {{false}}.


Styles

StyleDescriptionExpected Value
Background colorChanges the background color of the form.Hex color code/choose a color using the color picker
Border radiusAdjusts the roundness of the component's corners.Numeric value
Border colorChanges the border color of the component.Hex color code/choose a color using the color picker
VisibilityControls the visibility of the component. If set to {{false}}, the component will not be visible.Use the toggle button OR click on Fx to pass a boolean value or a logical expression that returns a boolean value i.e. either {{true}} or {{false}}
DisableMakes the component non-functional when set to true.Use the toggle button OR click on Fx to pass a boolean value or a logical expression that returns a boolean value i.e. either {{true}} or {{false}}

General

Box Shadow

The Box Shadow property is used to add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow.

Box Shadow Example

Exposed Variables

VariablesDescriptionExpected Value
dataThis variable holds the data of all the components that are nested inside the form component.You can access the value dynamically using JS. For example, {{components.form1.data.numberinput1.value}}

Component Specific Actions (CSA)

Following actions of form component can be controlled using the Component Specific Actions(CSA):

ActionsDescription
submitFormSubmits the form data via a component-specific action within any event handler. Additionally, there is an option to employ a RunJS query to execute component-specific actions such as await components.form1.submitForm()
resetFormResets the form data via a component-specific action within any event handler. Additionally, there is an option to employ a RunJS query to execute component-specific actions such as await components.form1.resetForm()

Custom Schema Examples

Datepicker

Properties that can be used in Datepicker schema are:

datepicker1: {
type: 'datepicker',
styles: {
borderRadius: 5,
disabled: false,
visibility: 'true'
},
value: '09/09/2023',
disabledDates: ['08/09/2023'],
enableTime: true,
format: 'DD/MM/YYYY',
label: 'Select a date'
}
KeyDescriptionExpected Value
typeSpecifies the type of component.'datepicker'
stylesSpecifies the styles of the component.Object that will contain the styles of the component like borderRadius, disabled, visibility etc.
borderRadiusSpecifies the border radius of the component.Numeric value like 5, 10, 20 etc.
disabledSpecifies whether to disable the component or not.set true to disable the component or false to enable it
visibilitySpecifies whether to show the component or not.set 'true' to show the component or 'false' to hide it
valueSpecifies the default date of the datepicker.Any date in the format specified in the format key
disabledDatesSpecifies the dates that you want to disable.Provide the dates in an array that you want to disable
enableTimeSpecifies whether to enable time or not.set true to enable time or false to disable it
formatSpecifies the format of the date.'DD/MM/YYYY'
labelSpecifies the label of the component.Any string value
Form custom schema

Number Input

Properties

numberInput1: {
type: 'number',
styles: {
backgroundColor: '#f6f5ff',
borderRadius: 20,
textColor: 'red',
borderColor: 'blue',
disabled: false,
visibility: 'true'
},
value: 10,
maxValue: 12,
minValue: 6,
placeholder: 'test',
label: 'Number Input'
}
KeyDescriptionExpected Value
typeSpecifies the type of component.'number'
stylesSpecifies the styles of the component.Object that will contain the styles of the component like backgroundColor, borderRadius, textColor, borderColor, disabled, visibility etc.
backgroundColorSpecifies the background color of the component.Color name or Hex color code '#f6f5ff'
borderRadiusSpecifies the border radius of the component.Numeric value like 5, 10, 20 etc.
textColorSpecifies the text color of the component.Color name or Hex color code '#f6f5ff'
borderColorSpecifies the border color of the component.Color name or Hex color code '#f6f5ff'
disabledSpecifies whether to disable the component or not.set true to disable the component or false to enable it
visibilitySpecifies whether to show the component or not.set 'true' to show the component or 'false' to hide it
valueSpecifies the default value of the number input.Numeric value
maxValueSpecifies the maximum value of the number input.Numeric value
minValueSpecifies the minimum value of the number input.Numeric value
placeholderSpecifies the placeholder text of the number input.Any string value
labelSpecifies the label of the component.Any string value
Form custom schema

Password

Properties

passwordInput1: {
type: 'password',
styles: {
backgroundColor: '#f6f5ff',
borderRadius: 10,
disabled: false,
visibility: 'true'
},
validation: {
maxLength: 9,
minLength: 5,
regex: '^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$'
},
placeholder: 'Enter a password',
label: ''
}
KeyDescriptionExpected Value
typeSpecifies the type of component.'password'
stylesSpecifies the styles of the component.Object that will contain the styles of the component like backgroundColor, borderRadius, disabled, visibility etc.
backgroundColorSpecifies the background color of the component.Color name or Hex color code '#f6f5ff'
borderRadiusSpecifies the border radius of the component.Numeric value like 10
disabledSpecifies whether to disable the component or not.set true to disable the component or false to enable it
visibilitySpecifies whether to show the component or not.set 'true' to show the component or 'false' to hide it
validationSpecifies validation rules for the password.Object containing maxLength, minLength, and regex properties
maxLengthSpecifies the maximum length of the password.Numeric value like 9
minLengthSpecifies the minimum length of the password.Numeric value like 5
regexSpecifies the regular expression for password validation.Regular expression pattern like '^(?=.[A-Za-z])(?=.\d)[A-Za-z\d]{8,}$'
placeholderSpecifies the placeholder text of the password input.Any string value like 'Enter a password'
labelSpecifies the label of the component.Any string value (in this case, it's an empty string), to hide the label you can use whitespace within quotes ' '
Form custom schema

Checkbox

Properties

checkbox1: {
type: 'checkbox',
styles: {
checkboxColor: 'red',
disabled: false,
textColor: 'red',
visibility: 'true'
},
value: false,
label: 'Checkbox'
}
KeyDescriptionExpected Value
typeSpecifies the type of component.'checkbox'
stylesSpecifies the styles of the component.Object that will contain the styles of the component like checkboxColor, disabled, textColor, visibility etc.
checkboxColorSpecifies the color of the checkbox.Color name or Hex color code '#f6f5ff'
disabledSpecifies whether to disable the component or not.set true to disable the component or false to enable it
textColorSpecifies the text color of the component.Color name or Hex color code '#f6f5ff'
visibilitySpecifies whether to show the component or not.set 'true' to show the component or 'false' to hide it
valueSpecifies the default value of the checkbox.Boolean value (true or false)
labelSpecifies the label of the component.Any string value like 'Checkbox'
Form custom schema

Toggle

Properties

toggleswitch1: {
type: 'toggle',
styles: {
textColor: 'blue',
disabled: false,
visibility: 'true',
toggleSwitchColor: 'red'
},
value: true,
label: 'Toggle switch'
}
KeyDescriptionExpected Value
typeSpecifies the type of component.'toggle'
stylesSpecifies the styles of the component.Object that will contain the styles of the component like textColor, disabled, visibility, toggleSwitchColor etc.
textColorSpecifies the text color of the component.Color name or Hex color code '#f6f5ff'
disabledSpecifies whether to disable the component or not.set true to disable the component or false to enable it
visibilitySpecifies whether to show the component or not.set 'true' to show the component or 'false' to hide it
toggleSwitchColorSpecifies the color of the toggle switch.Color name or Hex color code '#f6f5ff'
valueSpecifies the default value of the toggle switch.Boolean value (true or false)
labelSpecifies the label of the component.Any string value like 'Toggle switch'
Form custom schema

Text Area

Properties

textArea1: {
type: 'textarea',
styles: {
disabled: false,
visibility: 'true',
borderRadius: 20
},
value: 'This is a text area',
placeholder: 'Enter text here',
label: 'Text Area'
}
KeyDescriptionExpected Value
typeSpecifies the type of component.'textarea'
stylesSpecifies the styles of the component.Object that will contain the styles of the component like disabled, visibility, borderRadius etc.
disabledSpecifies whether to disable the component or not.set true to disable the component or false to enable it
visibilitySpecifies whether to show the component or not.set 'true' to show the component or 'false' to hide it
borderRadiusSpecifies the border radius of the component.Numeric value like 20
valueSpecifies the default value of the text area.Any string value like 'This is a text area'
placeholderSpecifies the placeholder text of the text area.Any string value like 'Enter text here'
labelSpecifies the label of the component.Any string value like 'Text Area'
Form custom schema

Date Range Picker

Properties

daterangepicker1: {
type: 'daterangepicker',
styles: {
disabled: true,
visibility: 'true',
borderRadius: 5
},
defaultEndDate: '12/04/2022',
defaultStartDate: '1/04/2022',
format: 'DD/MM/YYYY',
label: 'Select a date range'
}
KeyDescriptionExpected Value
typeSpecifies the type of component.'daterangepicker'
stylesSpecifies the styles of the component.Object that will contain the styles of the component like disabled, visibility, borderRadius etc.
disabledSpecifies whether to disable the component or not.set true to disable the component or false to enable it
visibilitySpecifies whether to show the component or not.set 'true' to show the component or 'false' to hide it
borderRadiusSpecifies the border radius of the component.Numeric value like 5
defaultEndDateSpecifies the default end date of the date range picker.Date in the format specified in the format key, e.g., '12/04/2022'
defaultStartDateSpecifies the default start date of the date range picker.Date in the format specified in the format key, e.g., '1/04/2022'
formatSpecifies the format of the date.'DD/MM/YYYY'
labelSpecifies the label of the component.Any string value like 'Select a date range'
Form custom schema

Multiselect

Properties

multiselect1: {
type: 'multiselect',
styles: {
disabled: false,
visibility: 'true',
borderRadius: 5
},
displayValues: ["one", "two", "three"],
label: 'Select options of your choice',
value: [2, 3],
values: [1, 2, 3],
showAllOption: true
}
KeyDescriptionExpected Value
typeSpecifies the type of component.'multiselect'
stylesSpecifies the styles of the component.Object that will contain the styles of the component like disabled, visibility, borderRadius etc.
disabledSpecifies whether to disable the component or not.set true to disable the component or false to enable it
visibilitySpecifies whether to show the component or not.set 'true' to show the component or 'false' to hide it
borderRadiusSpecifies the border radius of the component.Numeric value like 5
displayValuesSpecifies the value for option labels in an array format.Array of strings like ["one", "two", "three"]
labelSpecifies the label of the component.Any string value like 'Select options of your choice'
valueSpecifies the default value(s) in an array.Array of values like [2, 3]
valuesSpecifies the values in an array.Array of values like [1, 2, 3]
showAllOptionSpecifies whether to show the 'All' option in the multiselect or not.set true to show the 'All' option or false to hide it
Form custom schema

Star Rating

Properties

starRating1: {
type: 'starrating',
styles: {
disabled: false,
visibility: 'true',
textColor: 'yellow',
labelColor: 'red'
},
allowHalfStar: true,
defaultSelected: 4.5,
maxRating: 10,
tooltips: ['one', 'two', 'three', 'four'],
label: 'Select a rating'
}
KeyDescriptionExpected Value
typeSpecifies the type of component.'starrating'
stylesSpecifies the styles of the component.Object that will contain the styles of the component like disabled, visibility, textColor, labelColor etc.
disabledSpecifies whether to disable the component or not.set true to disable the component or false to enable it
visibilitySpecifies whether to show the component or not.set 'true' to show the component or 'false' to hide it
textColorSpecifies the color of the stars.Color name or Hex color code '#f6f5ff'
labelColorSpecifies the color of the label.Color name or Hex color code '#f6f5ff'
allowHalfStarSpecifies whether to allow selection of half star rating or not.set true to allow half-star ratings or false to disable it
defaultSelectedSpecifies the default value of the star rating.Numeric value like 4.5
maxRatingSpecifies the maximum rating.Numeric value like 10
tooltipsSpecifies the tooltips for each star in an array.Array of strings like ['one', 'two', 'three', 'four']
labelSpecifies the label of the component.Any string value like 'Select a rating'
Form custom schema

File Picker

Properties

filepicker1: {
type: 'filepicker',
styles: {
visibility: 'true',
borderRadius: 10
},
enableMultiple: true,
fileType: '*/*',
instructionText: 'Click here to select files',
maxFileCount: 5,
maxSize: 6000000,
minSize: 25,
parseContent: true,
parseFileType: 'csv',
label: 'Select a file'
}
KeyDescriptionExpected Value
typeSpecifies the type of component.'filepicker'
stylesSpecifies the styles of the component.Object that will contain the styles of the component like visibility, borderRadius etc.
visibilitySpecifies whether to show the component or not.set 'true' to show the component or 'false' to hide it
borderRadiusSpecifies the border radius of the component.Numeric value like 10
enableMultipleSpecifies whether to enable multiple file selection or not.set true to enable multiple file selection or false to disable it
fileTypeSpecifies the mime file type.Mime types like '/' (accepts all file types)
instructionTextSpecifies the instruction text of the file picker.Any string value like 'Click here to select files'
maxFileCountSpecifies the maximum number of files that can be selected.Numeric value like 5
maxSizeSpecifies the maximum size of the file in bytes.Numeric value like 6000000 (6MB)
minSizeSpecifies the minimum size of the file in bytes.Numeric value like 25
parseContentSpecifies whether to parse the content of the file or not.set true to parse the content or false to disable it
parseFileTypeSpecifies the file type to parse (e.g., csv, text, xlsx).File type like 'csv'
labelSpecifies the label of the component.Any string value like 'Select a file'
Form custom schema

Text Input

Properties

textinput1: {
type: 'textinput',
value: 'Random text',
placeholder: 'enter first name here',
label: 'First name',
validation: {
maxLength: 6
},
styles: {
backgroundColor: 'red',
borderRadius: 20,
errorTextColor: 'green',
disabled: false,
visibility: false,
textColor: 'yellow'
}
}
KeyDescriptionExpected Value
typeSpecifies the type of component.'textinput'
valueSpecifies the default value of the text input.Any string value like 'Random text'
placeholderSpecifies the placeholder text of the text input.Any string value like 'enter first name here'
labelSpecifies the label of the component.Any string value like 'First name'
validationSpecifies validation rules for the text input.Object containing maxLength property
maxLengthSpecifies the maximum length validation of the text input.Numeric value like 6
stylesSpecifies the styles of the component.Object that will contain the styles of the component like backgroundColor, borderRadius, errorTextColor, disabled, visibility, textColor etc.
backgroundColorSpecifies the background color of the component.Color name or Hex color code '#f6f5ff'
borderRadiusSpecifies the border radius of the component.Numeric value like 20
errorTextColorSpecifies the color of the error text.Color name or Hex color code '#f6f5ff'
disabledSpecifies whether to disable the component or not.set true to disable the component or false to enable it
visibilitySpecifies whether to show the component or not.set false to hide the component or true to show it
textColorSpecifies the text color of the component.Color name or Hex color code '#f6f5ff'
Form custom schema

Properties

dropdown1: {
type: 'dropdown',
displayValues: [1, 2, 3],
values: ['one', 'two', 'three'],
loading: false,
value: 'two',
label: 'Select a number',
styles: {
disabled: false,
visibility: 'true',
borderRadius: 5,
justifyContent: 'end'
}
}
KeyDescriptionExpected Value
typeSpecifies the type of component.'dropdown'
displayValuesSpecifies the value for option labels in an array format.Array of values like [1, 2, 3]
valuesSpecifies the option labels in an array.Array of strings like ['one', 'two', 'three']
loadingSpecifies whether to show the loading state or not.set true to show the loading state or false to hide it
valueSpecifies the default selected value of the dropdown.Any value from the values array, like 'two'
labelSpecifies the label of the component.Any string value like 'Select a number'
stylesSpecifies the styles of the component.Object that will contain the styles of the component like disabled, visibility, borderRadius, justifyContent etc.
disabledSpecifies whether to disable the component or not.set true to disable the component or false to enable it
visibilitySpecifies whether to show the component or not.set 'true' to show the component or 'false' to hide it
borderRadiusSpecifies the border radius of the component.Numeric value like 5
justifyContentSpecifies the alignment of the dropdown options.'start', 'center', or 'end'
Form custom schema

Button

Properties

button1: {
type: 'button',
value: 'Submit',
label: '',
styles: {
backgroundColor: 'blue',
textColor: 'white',
borderRadius: 5,
borderColor: 'black',
loaderColor: 'gray',
visibility: 'true',
disabled: true
}
}
KeyDescriptionExpected Value
typeSpecifies the type of component.'button'
valueSpecifies the button text.Any string value like 'Submit'
labelSpecifies the label of the component.Set to '' (empty string) to hide the label
stylesSpecifies the styles of the component.Object that will contain the styles of the component like backgroundColor, textColor, borderRadius, borderColor, loaderColor, visibility, disabled etc.
backgroundColorSpecifies the background color of the button.Color name or Hex color code '#f6f5ff'
textColorSpecifies the text color of the button.Color name or Hex color code '#f6f5ff'
borderRadiusSpecifies the border radius of the button.Numeric value like 5
borderColorSpecifies the border color of the button.Color name or Hex color code '#f6f5ff'
loaderColorSpecifies the color of the loader on the button.Color name or Hex color code '#f6f5ff'
visibilitySpecifies whether to show the component or not.set 'true' to show the component or 'false' to hide it
disabledSpecifies whether to disable the component or not.set true to disable the component or false to enable it
Form custom schema

Text

Properties

text1: {
type: 'text',
value: 'This is a text component',
label: '',
styles: {
backgroundColor: '#f6f5ff',
textColor: 'red',
fontSize: 24,
fontWeight: 30
}
}
KeyDescriptionExpected Value
typeSpecifies the type of component.'text'
valueSpecifies the value of the text component.Any string value like 'This is a text component'
labelSpecifies the label of the component.Set to '' (empty string) to hide the label
stylesSpecifies the styles of the component.Object that will contain the styles of the component like backgroundColor, textColor, fontSize, fontWeight etc.
backgroundColorSpecifies the background color of the text.Color name or Hex color code '#f6f5ff'
textColorSpecifies the text color of the text.Color name or Hex color code '#f6f5ff'
fontSizeSpecifies the font size of the text.Numeric value like 24
fontWeightSpecifies the font weight of the text.Numeric value like 30
Form custom schema

Radio

Properties

radioButton1: {
type: 'radio',
styles: {
textColor: 'black',
disabled: false,
visibility: 'true'
},
displayValues: ['option 1', 'option 2', 'option 3'],
label: 'Radio Buttons',
value: 2,
values: [1, 2, 3]
}
KeyDescriptionExpected Value
typeSpecifies the type of component.'radio'
stylesSpecifies the styles of the component.Object that will contain the styles of the component like textColor, disabled, visibility etc.
textColorSpecifies the text color of the radio options.Color name or Hex color code '#f6f5ff'
disabledSpecifies whether to disable the component or not.set true to disable the component or false to enable it
visibilitySpecifies whether to show the component or not.set 'true' to show the component or 'false' to hide it
displayValuesSpecifies the value for labels in an array format.Array of strings like ['option 1', 'option 2', 'option 3']
labelSpecifies the label of the component.Any string value like 'Radio Buttons'
valueSpecifies the default selected value of the radio button.Any value from the values array, like 2
valuesSpecifies the values in an array.Array of values like [1, 2, 3]
Form custom schema