-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Components JSON Schema
Mike edited this page May 29, 2025
·
20 revisions
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"
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.
|
no | {required: false} |
conditional | Determines when this component should be added to the form for both processing and input. | Object with the following properties.
|
no | |
errors | Allows customizable errors to be displayed for each component when an error occurs. This is an object with the following keys
|
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.