ToolJet/docs/versioned_docs/version-2.17.0/widgets/form.md

id	title
form	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.

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

Properties

Properties	Description	Expected Value
Button To Submit Form	This 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 State	Loading 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 Schema	Enabling 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.

Key	Description
title	The title key specifies the title of the form.
properties	The properties key holds an object that defines the properties of the components that will be inside the form.
submitButton	The 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
  }
}}

Events

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

Event	Description
On submit	On submit event is triggered when the submit button on the form component is clicked.
On invalid	On 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.

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

Style	Description	Expected Value
Background color	Changes the background color of the form.	Hex color code/choose a color using the color picker
Border radius	Adjusts the roundness of the component's corners.	Numeric value
Border color	Changes the border color of the component.	Hex color code/choose a color using the color picker
Visibility	Controls 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}}
Disable	Makes 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.

Exposed Variables

Variables	Description	Expected Value
data	This 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):

Actions	Description
submitForm	Submits 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()
resetForm	Resets 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
• Number Input
• Password
• Checkbox
• Toggle
• Text Area
• Date Range Picker
• Multiselect
• Star Rating
• File Picker
• Text Input
• Dropdown
• Button
• Text
• Radio

Datepicker

Properties that can be used in Datepicker schema are:

datepicker1: {    // component name
    type: 'datepicker', // define the type of component
    styles: {
        borderRadius: 5, // define the border radius as a numeric value
        disabled: false,  // set true to disable the component or false to enable it
        visibility: 'true' // set 'true' to show the component or 'false' to hide it
    },
    value: '09/09/2023',  // set the default date for the datepicker
    disabledDates: ['08/09/2023'], // provide the dates in an array that you want to disable 
    enableTime: true, // set true to enable time or false to disable it
    format: 'DD/MM/YYYY', // set the format of the date
    label: 'Select a date' // set the label of the component
}

Number Input

Properties

numberInput:{ // component name
  type: 'number', // define the type of component
  styles: {
        backgroundColor: '#f6f5ff', // set the background color of the component by providing a hex color code
        borderRadius: 20, // provide a numeric value to set the border radius
        textColor: 'red', // set the text color of the component by providing a hex color code
        borderColor: 'blue', // set the border color of the component by providing a hex color code
        disabled: false, // set true to disable the component or false to enable it
        visibility: 'true' // set 'true' to show the component or 'false' to hide it
 },
    value: 10, // set the default value of the number input
    maxValue: 12, // set the maximum value of the number input
    minValue: 6, // set the minimum value of the number input
    placeholder: 'test', // set the placeholder text of the number input
    label: 'Number Input' // set the label of the component
},

Password

Properties

passwordInput1:{ // component name
  type:"password", // define the type of component
  styles:{
      backgroundColor: '#f6f5ff', // set the background color of the component by providing a hex color code
      borderRadius: 10, // provide a numeric value to set the border radius
      disabled: false, // set true to disable the component or false to enable it
      visibility: 'true' // set 'true' to show the component or 'false' to hide it
   },
   validation:{
      maxLength: 9, // set the maximum length of the password
      minLength: 5, // set the minimum length of the password
      regex: '^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$' // set the regex for the password
},
   placeholder:"Enter a password", // set the placeholder text of the password input
   label: '' // set the label of the component
},

Checkbox

Properties

checkbox1:{ // component name
  type: 'checkbox', // define the type of component
  styles: {
    checkboxColor: 'red', // set the color of the checkbox by providing a hex color code
    disabled: false, // set true to disable the component or false to enable it
    textColor: 'red', // set the text color of the component by providing a hex color code
    visibility: 'true' // set 'true' to show the component or 'false' to hide it
  },
  value: false, // set the default value of the checkbox
  label: 'Checkbox' // set the label of the component
},

Toggle

Properties

toggleswitch1:{ // component name
  type: 'toggle',  // define the type of component
  styles: {
    textColor: 'blue', // set the text color of the component by providing a hex color code
    disabled: false, // set true to disable the component or false to enable it
    visibility: 'true', // set 'true' to show the component or 'false' to hide it
    toggleSwitchColor: 'red' // set the color of the toggle switch by providing a hex color code
  },
  value: true, // set the default value of the toggle switch
  label: 'Toggle switch' // set the label of the component
 },

Text Area

Properties

textArea1:{ // component name
  type: 'textarea', // define the type of component
  styles: {
    disabled: false, // set true to disable the component or false to enable it
    visibility: 'true', // set 'true' to show the component or 'false' to hide it
    borderRadius: 20 // provide a numeric value to set the border radius
  },
  value: 'This is a text area', // set the default value of the text area
  placeholder: 'Enter text here',   // set the placeholder text of the text area
  label: 'Text Area' // set the label of the component
 },

Date Range Picker

Properties

daterangepicker1: { // component name
  type: 'daterangepicker', // define the type of component
  styles: {
    disabled: true, // set true to disable the component or false to enable it  
    visibility: 'true', // set 'true' to show the component or 'false' to hide it
    borderRadius: 5 // provide a numeric value to set the border radius
  },
  defaultEndDate: '12/04/2022', // set the default end date of the date range picker
  defaultStartDate: '1/04/2022', // set the default start date of the date range picker
  format: 'DD/MM/YYYY', // set the format of the date
  label: 'Select a date range' // set the label of the component
},

Multiselect

Properties

multiselect1: { // component name
  type: 'multiselect', // define the type of component
  styles: {
    disabled: false, // set true to disable the component or false to enable it
    visibility: 'true', // set 'true' to show the component or 'false' to hide it
    borderRadius: 5 // provide a numeric value to set the border radius
  },
  displayValues: ["one","two","three"], // set the value for option labels in an array format
  label: 'Select options', // set the label of the component
  value: [2,3], // set the default value(s) in an array
  values: [1,2,3], // set the values in an array
  showAllOption: true, // set true to show the 'All' option in the multiselect or false to hide it
  label: 'Select options of your choice' // set the label of the component
},

Star Rating

Properties

starRating1: { // component name
  type: 'starrating', // define the type of component
  styles: {
    disabled: false, // set true to disable the component or false to enable it
    visibility: 'true', // set 'true' to show the component or 'false' to hide it
    textColor: 'yellow', // set the color of the stars by providing a hex color code
    labelColor: 'red' // set the color of the label by providing a hex color code
  },
  allowHalfStar: true, // set true to allow selection of half star rating or false to disable it
  defaultSelected: 4.5, // set the default value of the star rating
  maxRating: 10, // set the maximum rating 
  tooltips: ['one','two','three','four'], // set the tooltips for each star in an array
  label: 'Select a rating' // set the label of the component
},

File Picker

Properties

filepicker1: { // component name
  type: 'filepicker', // define the type of component
  styles: {
    visibility: 'true', // set 'true' to show the component or 'false' to hide it
    borderRadius: 10 // provide a numeric value to set the border radius
  },
  enableMultiple: true, // set true to enable multiple file selection or false to disable it
  fileType: '*/*', // set the mime file type
  instructionText: 'Click here to select files', // set the instruction text of the file picker
  maxFileCount: 5, // set the maximum number of files that can be selected
  maxSize: 6000000, // set the maximum size of the file in bytes
  minSize: 25, // set the minimum size of the file in bytes
  parseContent: true, // set true to parse the content of the file or false to disable it
  parseFileType: 'csv', // set the file type to parse e.g. csv, text, xlsx
  label: 'Select a file' // set the label of the component
},

Text Input

Properties

textinput1: { // component name
    type: 'textinput', // define the type of component
    value: 'Random text', // set the default value of the text input 
    placeholder: 'enter first name here', // set the placeholder text of the text input
    label: 'First name', // set the label of the component
    validation: {
      maxLength: 6, // set the maximum length validation of the text input
    },
    styles: {
      backgroundColor: 'red', // set the background color of the component by providing a hex color code
      borderRadius: 20, // provide a numeric value to set the border radius
      errorTextColor: 'green', // set the color of the error text by providing a hex color code
      disabled: false, // set true to disable the component or false to enable it
      visibility: false, // set 'true' to show the component or 'false' to hide it
      textColor: 'yellow' // set the text color by providing a hex color code
    },
    },

Dropdown

Properties

dropdown1: { // component name
  type: 'dropdown', // define the type of component
  displayValues: [1, 2, 3], // set the value for option labels in an array format
  values: ['one', 'two', 'three'], // set the option labels in an array
  loading: false, // set true to show the loading state or false to hide it
  value: 'two', // set the default selected value of the dropdown
  label: 'Select a number', // set the label of the component
  styles: {
    disabled: false, // set true to disable the component or false to enable it
    visibility: 'true', // set 'true' to show the component or 'false' to hide it
    borderRadius: 5, // provide a numeric value to set the border radius
    justifyContent: 'end' // set the alignment of the dropdown options to start, center or end
  }
},

Button

Properties

button1: { // component name
  type:'button', // define the type of component
  value: 'Submit', // set the button text
  label: '', // set the label of the component, set the value null i.e '' to hide the label
  styles: {
      backgroundColor: 'blue', // set the background color of the button by providing a hex color code
      textColor: 'white', // set the text color of the button by providing a hex color code
      borderRadius: 5, // provide a numeric value to set the border radius
      borderColor: 'black', // set the border color of the button by providing a hex color code
      loaderColor: 'gray', // set the color of the loader on the button by providing a hex color code
      visibility: 'true', // set 'true' to show the component or 'false' to hide it
      disabled: true // set true to disable the component or false to enable it
    }
    },

Text

Properties

text1: { // component name
  type: 'text', // define the type of component
  value: 'This is a text component', // set the value of the text component
  label: '', // set the label of the component, set the value null i.e '' to hide the label
  styles: {
    backgroundColor: '#f6f5ff', // set the background color of the text by providing a hex color code
    textColor: 'red', // set the text color by providing a hex color code
    fontSize: 24, // set the font size of the text
    fontWeight: 30 // set the font weight of the text
  }
},

Radio

Properties

radioButton1: { // component name
  type: 'radio', // define the type of component
  styles: {
    textColor: 'black', // set the text color of the radio option by providing a hex color code
    disabled: false, // set true to disable the component or false to enable it
    visibility: 'true' // set 'true' to show the component or 'false' to hide it 
  },
  displayValues: ['option 1', 'option 2', 'option 3'], // set the value for labels in an array format
  label: 'Radio Buttons', // set the label of the component
  value: 2, // set the default selected value of the radio button
  values: [1,2,3], // set the valuees in an array
},