Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-04-22 22:17:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8
ToolJet/docs/versioned_docs/version-3.16.0-LTS/widgets/form/custom-schema.md

488 lines
23 KiB
Markdown
Raw Normal View History

[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
---
id: schema
title: Custom Schema
---
In this guide, we’ll cover some of the most commonly used custom schemas.
For more information:
[docs]: Fix Broken URL
2026-02-12 05:40:46 +00:00
- On how to generate a form, refer to the [Generate Form](/docs/widgets/form/) guide.
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
- For available form properties, refer to the [Properties](/docs/widgets/form/properties) guide.
- For CSAs and exposed variables, refer to the [CSA and Exposed Variables](/docs/widgets/form/csa) guide.
## Datepicker
Properties that can be used in Datepicker schema are:
```js
"datepicker1": {
"type": "datepicker",
"styles": {
"borderRadius": 5,
"disabled": false,
"visibility": "true"
},
"value": "09/09/2025",
"disabledDates": ["08/09/2025"],
"enableTime": true,
"format": "DD/MM/YYYY",
"label": "Date of Birth"
}
```
| Key | Description | Expected Value |
| :----------- | :----------- | :-----------|
| type | Specifies the type of component. | `datepicker` |
| styles | Specifies the styles of the component. | Object that will contain the styles of the component like *borderRadius*, *disabled*, *visibility*, etc. |
| borderRadius | Specifies the border radius of the component. | Numeric value like 5, 10, 20 etc. |
| disabled | Specifies whether to disable the component or not. | Set `true` to disable the component or `false` to enable it. |
| visibility | Specifies whether to show the component or not. | Set `true` to show the component or `false` to hide it. |
| value | Specifies the default date of the datepicker. | Date in correct format. |
| disabledDates | Specifies the dates that you want to disable. | Dates in an array, in the correct format. |
| enableTime | Specifies whether to enable time or not. | Set `true` to enable time or `false` to disable it. |
| format | Specifies the format of the date. | 'DD/MM/YYYY' |
| label | Specifies the label of the component. | Any string value. |
## Number Input
```js
"numberInput1": {
"type": "number",
"styles": {
"backgroundColor": "#f6f5ff",
"borderRadius": 3,
"textColor": "#025aa3",
"borderColor": "blue",
"disabled": false,
"visibility": "true"
},
"value": 10,
"maxValue": 12,
"minValue": 6,
"placeholder": "Enter a Number",
"label": "Number Input"
}
```
| <div style={{ width:"100px"}}> Key </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
| :----------- | :----------- | :-----------|
| type | Specifies the type of component. | 'number' |
| styles | Specifies the styles of the component. | Object that will contain the styles of the component like *backgroundColor*, *borderRadius*, *textColor*, *borderColor*, *disabled*, *visibility* etc. |
| backgroundColor | Specifies the background color of the component. | Color name or Hex color code. |
| borderRadius | Specifies the border radius of the component. | Numeric value like 5, 10, 20 etc. |
| textColor | Specifies the text color of the component. | Color name or Hex color code. |
| borderColor | Specifies the border color of the component. | Color name or Hex color code. |
| disabled | Specifies whether to disable the component or not. | Set `true` to disable the component or `false` to enable it. |
| visibility | Specifies whether to show the component or not. | Set `true` to show the component or `false` to hide it. |
| value | Specifies the default value of the number input. | Numeric value |
| maxValue | Specifies the maximum value of the number input. | Numeric value |
| minValue | Specifies the minimum value of the number input. | Numeric value |
| placeholder | Specifies the placeholder text of the number input. | Any string value |
| label | Specifies the label of the component. | Any string value |
## Password
```js
"passwordInput1": {
"type": "password",
"styles": {
"backgroundColor": "#f6f5ff",
"borderRadius": 5,
"disabled": false,
"visibility": "true"
},
"validation": {
"maxLength": 9,
"minLength": 5,
"regex": "^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$"
},
"placeholder": "Enter Password",
"label": "Password"
}
```
| <div style={{ width:"100px"}}> Key </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"100px"}}> Expected Value </div> |
| :----------- | :----------- | :-----------|
| type | Specifies the type of component. | `password` |
| styles | Specifies the styles of the component. | Object that will contain the styles of the component like *backgroundColor*, *borderRadius*, *disabled*, *visibility* etc. |
| backgroundColor | Specifies the background color of the component. | Color name or Hex color code. |
| borderRadius | Specifies the border radius of the component. | Numeric value like 10. |
| disabled | Specifies whether to disable the component or not. | Set `true` to disable the component or `false` to enable it. |
| visibility | Specifies whether to show the component or not. | Set `true` to show the component or `false` to hide it. |
| validation | Specifies validation rules for the password. | Object containing *maxLength*, *minLength*, and *regex* properties. |
| maxLength | Specifies the maximum length of the password. | Numeric value like 9. |
| minLength | Specifies the minimum length of the password. | Numeric value like 5. |
| regex | Specifies the regular expression for password validation. | Regular expression pattern like `'^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$'` |
| placeholder | Specifies the placeholder text of the password input. | Any string value like 'Enter a password'. |
| label | Specifies the label of the component. | Any string value. |
## Checkbox
```js
"checkbox1": {
"type": "checkbox",
"styles": {
"checkboxColor": "#025aa3",
"disabled": false,
"textColor": "#025aa3",
"visibility": "true"
},
"value": false,
"label": "Checkbox"
}
```
| <div style={{ width:"100px"}}> Key </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
| :----------- | :----------- | :-----------|
| type | Specifies the type of component. | `checkbox` |
| styles | Specifies the styles of the component. | Object that will contain the styles of the component like *checkboxColor*, *disabled*, *textColor*, *visibility*, etc. |
| checkboxColor | Specifies the color of the checkbox. | Color name or Hex color code. |
| disabled | Specifies whether to disable the component or not. | Set `true` to disable the component or `false` to enable it. |
| textColor | Specifies the text color of the component. | Color name or Hex color code. |
| visibility | Specifies whether to show the component or not. | Set `true` to show the component or `false` to hide it. |
| value | Specifies the default value of the checkbox. | Boolean value (true or false). |
| label | Specifies the label of the component. | Any string value like 'Accept T&C'. |
## Toggle
```js
"toggleswitch1": {
"type": "toggle",
"styles": {
"textColor": "#025aa3",
"disabled": false,
"visibility": "true",
"toggleSwitchColor": "#025aa3"
},
"value": true,
"label": "Toggle switch"
}
```
| <div style={{ width:"100px"}}> Key </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
| :----------- | :----------- | :-----------|
| type | Specifies the type of component. | `toggle` |
| styles | Specifies the styles of the component. | Object that will contain the styles of the component like *textColor*, *disabled*, *visibility*, *toggleSwitchColor* etc. |
| textColor | Specifies the text color of the component. | Color name or Hex color code. |
| disabled | Specifies whether to disable the component or not. | Set `true` to disable the component or `false` to enable it. |
| visibility | Specifies whether to show the component or not. | Set `true` to show the component or `false` to hide it. |
| toggleSwitchColor | Specifies the color of the toggle switch. | Color name or Hex color code. |
| value | Specifies the default value of the toggle switch. | Boolean value (true or false) |
| label | Specifies the label of the component. | Any string value. |
## Text Area
```js
"textArea1": {
"type": "textarea",
"styles": {
"disabled": false,
"visibility": "true",
"borderRadius": 5
},
"value": "This is a text area",
"placeholder": "Enter Text Here",
"label": "Text Area"
}
```
| <div style={{ width:"100px"}}> Key </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"100px"}}> Expected Value </div> |
| :----------- | :----------- | :-----------|
| type | Specifies the type of component. | `textarea` |
| styles | Specifies the styles of the component. | Object that will contain the styles of the component like *disabled*, *visibility*, *borderRadius*, etc. |
| disabled | Specifies whether to disable the component or not. | Set `true` to disable the component or `false` to enable it. |
| visibility | Specifies whether to show the component or not. | Set `true` to show the component or `false` to hide it. |
| borderRadius | Specifies the border radius of the component. | Numeric value. |
| value | Specifies the default value of the text area. | String value. |
| placeholder | Specifies the placeholder text of the text area. | String value. |
| label | Specifies the label of the component. | String value. |
## Date Range Picker
```js
"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"
}
```
| <div style={{ width:"100px"}}> Key </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
| :----------- | :----------- | :-----------|
| type | Specifies the type of component. | *daterangepicker* |
| styles | Specifies the styles of the component. | Object that will contain the styles of the component like *disabled*, *visibility*, *borderRadius*, etc. |
| disabled | Specifies whether to disable the component or not. | Set `true` to disable the component or `false` to enable it. |
| visibility | Specifies whether to show the component or not. | Set `true` to show the component or `false` to hide it. |
| borderRadius | Specifies the border radius of the component. | Numeric value. |
| defaultEndDate | Specifies the default end date. | Date in the correct format. |
| defaultStartDate | Specifies the default start date. | Date in the correct format. |
| format | Specifies the format of the date. | 'DD/MM/YYYY' |
| label | Specifies the label of the component. | String value. |
## Multiselect
```js
"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
}
```
| <div style={{ width:"100px"}}> Key </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
| :----------- | :----------- | :-----------|
| type | Specifies the type of component. | `multiselect` |
| styles | Specifies the styles of the component. | Object that will contain the styles of the component like *disabled*, *visibility*, *borderRadius* etc. |
| disabled | Specifies whether to disable the component or not. | Set `true` to disable the component or `false` to enable it. |
| visibility | Specifies whether to show the component or not. | Set `true` to show the component or `false` to hide it. |
| borderRadius | Specifies the border radius of the component. | Numeric value. |
| displayValues | Specifies the value for option labels in an array format. | Array of strings like `["one", "two", "three"]`. |
| label | Specifies the label of the component. | String value. |
| value | Specifies the default value(s) in an array. | Array of values like `[2, 3]`. |
| values | Specifies the values in an array. | Array of values like `[1, 2, 3]`. |
| showAllOption | Specifies whether to show the 'All' option in the component or not. | Set `true` to show the 'All' option or `false` to hide it. |
## Star Rating
```js
"starRating1": {
"type": "starrating",
"styles": {
"disabled": false,
"visibility": "true",
"textColor": "gold",
"labelColor": "#025aa3"
},
"allowHalfStar": true,
"defaultSelected": 3.5,
"maxRating": 5,
"tooltips": ["one", "two", "three", "four"],
"label": "Select a Rating"
}
```
| <div style={{ width:"100px"}}> Key </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
| :----------- | :----------- | :-----------|
| type | Specifies the type of component. | `starrating` |
| styles | Specifies the styles of the component. | Object that will contain the styles of the component like *disabled*, *visibility*, *textColor*, *labelColor* etc. |
| disabled | Specifies whether to disable the component or not. | Set `true` to disable the component or `false` to enable it. |
| visibility | Specifies whether to show the component or not. | Set `true` to show the component or `false` to hide it. |
| textColor | Specifies the color of the stars. | Color name or Hex color code. |
| labelColor | Specifies the color of the label. | Color name or Hex color code. |
| allowHalfStar | Specifies whether to allow selection of half star rating or not. | Set `true` to allow half-star ratings or `false` to disable it. |
| defaultSelected | Specifies the default value of the star rating. | Numeric value |
| maxRating | Specifies the maximum rating. | Numeric value |
| tooltips | Specifies the tooltips for each star in an array. | Array of strings like `['one', 'two', 'three', 'four']`. |
| label | Specifies the label of the component. | String value. |
## File Picker
```js
"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"
}
```
| <div style={{ width:"100px"}}> Key </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
| :----------- | :----------- | :-----------|
| type | Specifies the type of component. | `filepicker` |
| styles | Specifies the styles of the component. | Object that will contain the styles of the component like *visibility*, *borderRadius* etc. |
| visibility | Specifies whether to show the component or not. | Set `true` to show the component or `false` to hide it. |
| borderRadius | Specifies the border radius of the component. | Numeric value |
| enableMultiple | Specifies whether to enable multiple file selection or not. | Set `true` to enable multiple file selection or `false` to disable it. |
| fileType | Specifies the mime file type. | Mime types like '*/*' (accepts all file types). |
| instructionText | Specifies the instruction text of the file picker. | String value |
| maxFileCount | Specifies the maximum number of files that can be selected. | Numeric value |
| maxSize | Specifies the maximum size of the file in bytes. | Numeric value like 6000000 (6 MB). |
| minSize | Specifies the minimum size of the file in bytes. | Numeric value like 25. |
| parseContent | Specifies whether to parse the content of the file or not. | Set `true` to parse the content or `false` to disable it. |
| parseFileType | Specifies the file type to parse (e.g., csv, text, xlsx). | File type |
| label | Specifies the label of the component. | String value. |
## Text Input
```js
"textinput1": {
"type": "textinput",
"value": "John",
"placeholder": "Enter the Name Here",
"label": "First Name",
"validation": {
"maxLength": 6
},
"styles": {
"backgroundColor": "#f6f5ff",
"borderRadius": 5,
"errorTextColor": "#025aa3",
"disabled": false,
"visibility": false,
"textColor": "#025aa3"
}
}
```
| <div style={{ width:"100px"}}> Key </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
| :----------- | :----------- | :-----------|
| type | Specifies the type of component. | `textinput` |
| value | Specifies the default value of the text input. | String value |
| placeholder | Specifies the placeholder text of the text input. | String value |
| label | Specifies the label of the component. | String value |
| validation | Specifies validation rules for the text input. | Object containing `maxLength` property. |
| maxLength | Specifies the maximum length validation of the text input. | Numeric value |
| styles | Specifies the styles of the component. | Object that will contain the styles of the component like *backgroundColor*, *borderRadius*, *errorTextColor*, *disabled*, *visibility*, *textColor* etc. |
| backgroundColor | Specifies the background color of the component. | Color name or Hex color code. |
| borderRadius | Specifies the border radius of the component. | Numeric value |
| errorTextColor | Specifies the color of the error text. | Color name or Hex color code. |
| disabled | Specifies whether to disable the component or not. | Set `true` to disable the component or `false` to enable it. |
| visibility | Specifies whether to show the component or not. | Set `false` to hide the component or `true` to show it. |
| textColor | Specifies the text color of the component. | Color name or Hex color code. |
## Dropdown
```js
"dropdown1": {
"type": "dropdown",
"displayValues": ["One", "Two", "Three"],
"values": [1, 2, 3],
"loading": false,
"value": 2,
"label": "Select a Number",
"styles": {
"disabled": false,
"visibility": "true",
"borderRadius": 5,
"justifyContent": "start"
}
}
```
| <div style={{ width:"100px"}}> Key </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
| :----------- | :----------- | :-----------|
| type | Specifies the type of component. | `dropdown` |
| displayValues | Specifies the value for option labels in an array format. | Array of values like `[1, 2, 3]`. |
| values | Specifies the option labels in an array. | Array of strings like `['one', 'two', 'three']`. |
| loading | Specifies whether to show the loading state or not. | Set `true` to show the loading state or `false` to hide it. |
| value | Specifies the default selected value of the dropdown. | Any value from the `values` array. |
| label | Specifies the label of the component. | String value |
| styles | Specifies the styles of the component. | Object that will contain the styles of the component like *disabled*, *visibility*, *borderRadius*, *justifyContent* etc. |
| disabled | Specifies whether to disable the component or not. | Set `true` to disable the component or `false` to enable it. |
| visibility | Specifies whether to show the component or not. | Set `true` to show the component or `false` to hide it. |
| borderRadius | Specifies the border radius of the component. | Numeric value |
| justifyContent | Specifies the alignment of the dropdown options. | `start`, `center`, or `end` |
## Button
```js
"button1": {
"type": "button",
"value": "Submit",
"label": "",
"styles": {
"backgroundColor": "#3A433B",
"textColor": "white",
"borderRadius": 5,
"borderColor": "#595959",
"loaderColor": "gray",
"visibility": "true",
"disabled": true
}
}
```
| <div style={{ width:"100px"}}> Key </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
| :----------- | :----------- | :-----------|
| type | Specifies the type of component. | `button` |
| value | Specifies the button text. | String value |
| label | Specifies the label of the component. | String value |
| styles | Specifies the styles of the component. | Object that will contain the styles of the component like *backgroundColor*, *textColor*, *borderRadius*, *borderColor*, *loaderColor*, *visibility*, *disabled* etc. |
| backgroundColor | Specifies the background color of the button. | Color name or Hex color code. |
| textColor | Specifies the text color of the button. | Color name or Hex color code. |
| borderRadius | Specifies the border radius of the button. | Numeric value |
| borderColor | Specifies the border color of the button. | Color name or Hex color code. |
| loaderColor | Specifies the color of the loader on the button. | Color name or Hex color code. |
| visibility | Specifies whether to show the component or not. | Set `true` to show the component or `false` to hide it. |
| disabled | Specifies whether to disable the component or not. | Set `true` to disable the component or `false` to enable it. |
## Text
```js
"text1": {
"type": "text",
"value": "This is a text component",
"label": "",
"styles": {
"backgroundColor": "#f6f5ff",
"textColor": "#025aa3",
"fontSize": 12,
"fontWeight": 500
}
}
```
| <div style={{ width:"100px"}}> Key </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
| :----------- | :----------- | :-----------|
| type | Specifies the type of component. | `text` |
| value | Specifies the value of the text component. | String value |
| label | Specifies the label of the component. | String value |
| styles | Specifies the styles of the component. | Object that will contain the styles of the component like *backgroundColor*, *textColor*, *fontSize*, *fontWeight* etc. |
| backgroundColor | Specifies the background color of the text. | Color name or Hex color code. |
| textColor | Specifies the text color of the text. | Color name or Hex color code. |
| fontSize | Specifies the font size of the text. | Numeric value |
| fontWeight | Specifies the font weight of the text. | Numeric value |
## Radio
```js
"radioButton1": {
"type": "radio",
"styles": {
"textColor": "black",
"disabled": false,
"visibility": "true"
},
"displayValues": ["Yes", "No"],
"label": "Radio Buttons",
"value": 1,
"values": [1, 2]
}
```
| <div style={{ width:"100px"}}> Key </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
| :----------- | :----------- | :-----------|
| type | Specifies the type of component. | `radio` |
| styles | Specifies the styles of the component. | Object that will contain the styles of the component like *textColor*, *disabled*, *visibility*, etc. |
| textColor | Specifies the text color of the radio options. | Color name or Hex color code. |
| disabled | Specifies whether to disable the component or not. | Set `true` to disable the component or `false` to enable it. |
| visibility | Specifies whether to show the component or not. | Set `true` to show the component or `false` to hide it. |
| displayValues | Specifies the value for labels in an array format. | Array of strings like `['option 1', 'option 2', 'option 3']`. |
| label | Specifies the label of the component. | String value |
| value | Specifies the default selected value of the radio button. | Any value from the `values` array. |
| values | Specifies the values in an array. | Array of values like `[1, 2, 3]`. |
Reference in a new issue Copy permalink