ToolJet/docs/versioned_docs/version-3.16.0-LTS/widgets/form/custom-schema.md

id	title
schema	Custom Schema

In this guide, we’ll cover some of the most commonly used custom schemas. For more information:

• On how to generate a form, refer to the Generate Form guide.
• For available form properties, refer to the Properties guide.
• For CSAs and exposed variables, refer to the CSA and Exposed Variables guide.

Datepicker

Properties that can be used in Datepicker schema are:

  "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

"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 style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
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

"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 style={{ width:"100px"}}> Description	<div style={{ width:"100px"}}> Expected Value
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

"checkbox1": {
  "type": "checkbox",
  "styles": {
    "checkboxColor": "#025aa3",
    "disabled": false,
    "textColor": "#025aa3",
    "visibility": "true"
  },
  "value": false,
  "label": "Checkbox"
}

<div style={{ width:"100px"}}> Key	<div style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
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

"toggleswitch1": {
  "type": "toggle",
  "styles": {
    "textColor": "#025aa3",
    "disabled": false,
    "visibility": "true",
    "toggleSwitchColor": "#025aa3"
  },
  "value": true,
  "label": "Toggle switch"
}

<div style={{ width:"100px"}}> Key	<div style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
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

"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 style={{ width:"100px"}}> Description	<div style={{ width:"100px"}}> Expected Value
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

"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 style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
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

"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 style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
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

"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 style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
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

"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 style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
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

"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 style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
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

"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 style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
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

"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 style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
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

"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 style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
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

"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 style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
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].