Components JSON Schema

Every component that can be rendered within a form also adheres to a JSON schema definition used to describe how that component behaves within the form. Every component that is rendered within a form shares a common schema that is used to represent the component as it is rendered within the form. Here are the common parameters that all components share.

For the updated documentation on available component settings, refer to the Form.io User Guide Section "Component Settings"

Common Parameters

Property	Description	Value	Required	Default
type	The type of component	address	yes	address
key	The API key for this field.	any string	yes
label	The HTML label to give this component	any string	no
placeholder	The text to show in the input before they type.	any string	no
input	Determines if this is an input from the user.	true or false	yes	true
tableView	Determines if this field will show in the data tables output.	true or false	no	true
multiple	If this field should collect multiple values, creating an array of values.	true or false	no	false
protected	If the value of this field should be shown to the end user via API once it is saved.	true or false	no	false
prefix	The prefix text to put in front of the input	Any string	no
suffix	The suffix text to put after the input	Any string	no
defaultValue	The default value to provide to this component.	Depends based on the component	no
clearOnHide	If the value of this field should be cleared when it is conditionally hidden.	true or false	no	true
unique	Validates if this field should be unique amongst other submissions in the same form.	true or false	no	false
persistent	Determines if the value of this field should be saved as persistent.	true or false	no	true
hidden	Determines if this field should be hidden from view by default. This can be overridden with the conditionals.	true or false	no	false
validate	Determines validation criteria for this component	Object with the following properties. required - If the field is required minLength - For text input, this checks the minimum length of text for valid input maxLength - For text inputs, this checks the maximum length of text for valid input pattern - For text input, this checks the text agains a Regular expression pattern. custom - A custom javascript based validation or a JSON object for using JSON Logic	no	{required: false}
conditional	Determines when this component should be added to the form for both processing and input.	Object with the following properties. show - If the field should show if the condition is true when - The field API key that it should compare its value against to determine if the condition is triggered. eq - The value that should be checked against the comparison component json - The JSON Logic to determine if this component is conditionally available.	no
errors	Allows customizable errors to be displayed for each component when an error occurs. This is an object with the following keys required min max minLength maxLength invalid_email invalid_date pattern custom	An object where the keys are provided in previous cell, and the values are the strings you wish to display. Each string has the {{ field }} to use within the string. Example. {"required": "{{ field }} is required. Try again."}	no
logic	Allows changing the component definition in reaction to data entered in a form. For example, changing a field to required, disabled or hidden when a value is entered.	An array of instances of the Field Logic Schema	no

Below is a list of all Form Components and the JSON schema specification for each component. The following components are allowed.

• Address
• Button
• Checkbox
• Columns
• Container
• Content
• Currency
• Custom
• DataGrid
• DateTime
• Day
• Email
• FieldSet
• File
• Form
• Hidden
• HTML Element
• Number
• Panel
• Password
• Phone Number
• Radio
• Resource
• Select
• Select Boxes
• Signature
• Survey
• Table
• TextArea
• TextField
• Time
• Well