Premium Components
Learn more about Premium Components below
Last updated
Was this helpful?
Learn more about Premium Components below
Last updated
Was this helpful?
Form.io provides access to modules that contain premium components and themes for enterprise plans on license basis. In order to use them, you will need to obtain Library License key and apply it in your application.
Contact in order to get the Library License key for premium components (if you don't yet have a license key with premium package enabled).
Install the package from .
This will install the package within your application.
In your codebase, set the license key on Formio.license in the main file of your app. Then Formio.use() the package. Depending on your language, do something like the following. (With react or vue, import Formio from react-formio or vue-formio instead of formiojs).
Render forms as usual. Premium components will now be installed in your app.
What is the Data Source?
The Data Source component is a hidden form component that is typically used to fetch data from an external source using an API endpoint. This component will not be visible to the end user but the stored data can be used for various reasons and use cases such as custom validation, calculation, data outputs, and more.
How do I use the Data Source?
To use the Data Source, start by dragging and dropping the field from the Premium component grouping in the Form Builder. Although the component is hidden when rendered, the field will be visible when editing the form.
The first setting you need to configure is the Fetch URL which will be the source of data the component will retain. Inherently, the Data Source will not do anything to the retained data, however, other fields and variables on the form can use the data to perform certain functions like field or application logic.
Below shows an example of the Data Source being used to fetch Data from an external URL and using the Trigger to execute business logic on the form.
Example Using External API URL
In this example, we are going to be fetching data from an external API URL hosting JSON containing a list of USA states. We are then going to use a checkbox on our form to trigger a Data Source event. That triggered event will then execute calculated logic to output the fetched data to fields inside a Data Grid.
Start off by adding the Data Source component to the builder. Within the settings, click the Fetch tab and add the following to the URL field:
Next, let's add our trigger component to the form. Add a Checkbox and name the component 'Populate'. Open the Data Source settings and click the Trigger tab. Click the Trigger on data change dropdown and select the 'Populate' checkbox from the form. This component will act as the Trigger to execute the event. Next, add the following for the Triggered Event which will be the event sent to the Form when the Trigger component is checked:
For our final step, we need to add the fields that will host the data population and configure Logic for those fields to execute when the Data Source event has been received.
Now that we have our fields in place, we need to add logic to the Data Grid to populate the data from our Data Source to the fields inside the grid. Edit the Data Grid settings and click the Logic Tab. Set the Trigger Type to Event and add the Event Name: 'populateState' to match our Data Source event. Set the Action Type to Value and add the following to the JavaScript content:
You should have a form looking something like this:
The only thing left to do is test our form. When the Populate checkbox is ticked, the Data Source is triggered to fetch the Data and fire off an event. Our Data Grid contains logic that is listening for the event and will populate the Data being stored from the Data Source to our Name and Abbreviation fields inside the Data Grid. Because our Name and Abbreviation field's property name matches the names inside the JSON URL, the data population will calculate the fields seamlessly.
The Trigger Settings will determine how and when the external data will be stored in the Data Source component.
Trigger on Form Init: Loads data once the form is rendered and ready for use.
Trigger on Server: Loads data on the server during validation.
Trigger on Data Change: Specifies a component the value change of which will have the data stored in the Data Source component be refreshed. A new request will be sent again.
Trigger on Blur of Component: Specifies a component on which blur, data stored in the Data Source component should be refreshed. A new request will be sent again.
Trigger on Event: Specifies the name of the event on which data stored in the Data Source component should be refreshed. A new request will be sent again.
Triggered Event: If specified, an event with the specified name will be triggered once the data load was triggered.
The Fetch Settings determine the source and the method for retrieving the External Data
Data Source Type: Specifies a source type from which data will be fetched. Available options: URL, IndexedDB.
Settings when URL is selected
Data Source URL: The API endpoint to which a request is made to retrieve data.
Method: The method to be used when making a request to the specified endpoint. Available options: GET, POST.
Request Headers: HTTP request headers to be used when making a request to the specified endpoint.
Forward Headers: Forwards the headers passed to the server to the fetch endpoint.
Form.io Authentication: Passes Form.io Authentication headers with the request.
Enable To Store Request Result in the Cache: If checked, the result of each API call to the specified endpoint will be cached. That means, if the Data Source refresh is triggered again with the same URL, it won't make a real request to that URL, but rather take the result of the previous request with the same URL from the cache.
Uncheck this setting, if the returned data from the URL updates frequently and should be kept up-to-date.
Settings when IndexedDB is selected
Choose From Existing Databases?: Allows selecting an existing database.
Database Name: The name of the indexedDB database.
Table Name: The name of a table in the indexedDB database.
Existing Database Name: The name of the existing indexedDB database.
Existing Table Name: The name of an existing table in the indexedDB database.
What is the CATPCHA component?
The Form.io CAPTCHA component is used to integrate CAPTCHA service providers into Form.io forms. CAPTCHA is a security measure designed to differentiate between human users and automated bots, helping to protect forms from spam and abuse.
How do I use the CATPCHA Component?
To use this component, you'll need to configure CAPTCHA with one of the supported providers:
After configuring a provider, copy the Site Key and Secret Key, then integrate these credentials into your project settings.
Navigate to your Project Settings > Integration > CAPTCHA
Specify the Site Key and a Secret Key from your provider
Save the Settings
As a result, your project will contain the following JSON:
Once the integration is complete the component will be available to add to your forms.
Drag and drop the CAPTCHA component on your Form
Within the component Settings, select the CAPTCHA Provider
Select whether the reCaptcha should execute when the Form Loads or Trigger on button click.
Save your Settings
When the CAPTCHA is executed and the form is submitted, the CAPTCHA results can be found in the metadata of the submission.
Render From JSON
If you want to render the form with a CAPTCHA component from JSON, add the following:
Add the following settings to the Form JSON:
Before the form is rendered, set the Project URL to the URL of project you have your CAPTCHA Secret Key set:
You can now render the form using JSON:
Type of Event: Sets the type of event to which the CAPTCHA component would react to: Button Key, Form Load
Trigger on Form Load: When your form with Form Load CAPTCHA triggers a ‘formLoad’ event, a verification request is sent to the CAPTCHA provider for an action called ‘<your_form_name>Load’. The data object in the submission response will vary depending on the provider.
E.G. Google’s reCAPTCHA submission value response
Button Key: Select the Button on the form that the CAPTCHA component will react to.
This is only allowed when the Button action is set to Event .
Trigger on Button Click
When any button on your form is clicked, the renderer searches for a Button Click CAPTCHA component associated with the same API key as the clicked button. If the renderer finds this CAPTCHA component, it sends a verification request to the provider for an action called '<your_button_key>Click'. The provider's response then becomes the submission value of your Button Click reCAPTCHA component.
E.G. Google’s reCAPTCHA Button Click response
Trigger on Button Click
When any button on your form is clicked, the renderer searches for a Button Click CAPTCHA component associated with the same API key as the clicked button. If the renderer finds this CAPTCHA component, it sends a verification request to the provider for an action called '<your_button_key>Click'. The provider's response then becomes the submission value of your Button Click CAPTCHA component.
Visible Verification (Cloudfare Turnstile): If selected, space will be allocated for the Cloudflare Turnstile CAPTCHA widget to appear on the form and will create white space for the widget while the form is loading.
What is the File component?
How do I use the File component?
Form.io does not host any files uploaded through a form response. Instead, files are stored with the Storage Provider selected for the component. Form.io will store references to the files, enabling access to the file through the Storage Provider, and further integration of those files into the application.
Once a storage provider has been set up, it should be selectable within the File component Storage settings. Additional settings such as file display, enabling webcam for mobile devices, and file type validations can be set.
How are files managed?
When the form user selects a file for upload, it is immediately sent to the configured storage provider, regardless of whether the form is submitted or not. The file will remain in storage even if the form user removes the attached file.
The storage providers which the file will be stored and accessed from. Select the appropriate provider. All providers (excluding URL and IndexedDB) require integration configurations to be set up in the project settings:
Base64: Files are locally stored in the browser. This should only be used for testing purposes.
IndexedDB: Upload files to a predefined IndexedDB API.
CSV - INFO COMING SOON.
The following settings may be available depending on which Storage provider is selected:
Private Download: Makes the file download send a POST request to the download URL with the x-jwt-token header. This will allow an endpoint to create a private download system.
Custom Request Options: Allows passing the custom xhr options.
File Form-Data Key: Key name that is used to modify for the file while calling API request.
Database: The name of the IndexedDB database.
Table: The name of a table in the IndexedDB database.
Directory: This field appends all files with a string so that they are in a directory on the storage provider. Must end in “/”.
File Name Template: Specifies a template for the name of the uploaded file(s). Regular template variables are available (data, component, user, value, moment, etc.). The variables fileName and guid are also available. The guid part must be present and will be added automatically if not found in the template.
Upload Only: Disables the download option and allows only the upload of files.
Display As Image(s): Instead of a list of linked files, images are rendered in the view. The filter in the file explorer will be set to the Image Files type on upload.
Image Size: The image size in pixels for previewing images.
Enable Web Camera: Allows using an attached camera to directly take a picture instead of uploading an existing file.
Webcam Width: The webcam size in pixels for taking pictures.
File Types: Allows specifying file types to classify the uploads. This is useful when allow multiple types of uploads but want to allow the user to specify which type of file each is.
File Pattern: Dictates which file extensions will be allowed to upload. Files not specified in this field will be prevented from being uploaded.
File Minimum/Maximum Size: Allows setting a minimum/maximum file size for uploaded files.
File Maximum Size: Allows setting a maximum file size for uploaded files.
What is a Nested Form?
The Nested Form component inserts an existing Form or Resource (the child form) into another Form or Resource (the parent form). All fields contained within the child form, including all field settings, will display accordingly in the Parent form.
Using Nested Forms
Once the child form has been created within the same project, simply drag and drop the Nested Form component onto the parent Form and select the child Form or Resource. The Nested Form component will display as an empty component in the builder, but will display the child Form fully when rendered.
Nested Forms For Remotely Deployed Projects
If your project is remotely deployed with subdirectories, set up your application to perform an API call like the following:
This will help Formio understand where to fetch nested resources from and will set up base URLs properly.
Form: Select a child Form/Resource that you’d like to nest into the parent form
What is the Tagpad?
The Tagpad component allows the form designer to add an image URL to the component. Additional components, like a Text Field, can then be added to the Tagpad image. This allows form users to 'tag' a point on the image and input data associated with the tagged point. Tagged points and corresponding input data will be saved with the submission data when the form is submitted.
How do I use the Tagpad?
Inside the Form Builder, drag and drop the Tagpad component from the Premium component grouping onto the form. Within the Tagpad settings, copy and paste your image URL to the corresponding field. Once set, the image will display in the Preview section of the component settings.
After adding your image URL, use the form builder to add additional components inside the Tagpad dropzone.
These components will display for the user when an area is 'tagged' on the image. The form user can then input field data to the corresponding dot tag which will be saved with the submission. Add as many dot tags as needed to the image. View or update input values for any saved dot by clicking the dot. Remove a dot tag and corresponding data by clicking the red trash can icon.
Width: Default image width
Height: Default image height
Dot Size: Default size of the dot tag
Dot Size Stroke: Default dot tag border width
Dot Custom Label: Default label of the dot tag
Dot Value Template: The HTML template representing the Dot values tagged by the form user. This template can be modified within the Template tab within the Tagpad settings. There are four variables that can be modified within the template:
Dot:
Index:
Array:
Instance:
What is the Sketchpad?
The Sketchpad allows a form designer to add a public image to the Sketchboad component. End users interacting with the form can then sketch on the image using a WYSIWG-type editor. Sketches made on the drawing will be saved with the submission data when the form is submitted.
How do I use the Sketchpad?
Start by dragging over the Sketchpad component from the Premium component grouping onto the form. Within the Sketchpad settings, copy and paste your image URL to the corresponding field. Once set, the image will display in the Preview section of the component settings and on the form builder.
Once set, end users interacting with the form can click the image to open a module. Here the user can perform different actions like drawing on the image, adding object shapes, changing line thickness, and selecting the sketch color. These settings are controlled by the end user inside the module window. The form designer can also change the default values for the mentioned settings.
Image URL: Image that will display on the Sketchpad component
Set Size Automatically: The form renderer automatically sizes the image based on available form space
Default Zoom: How close or far the image will appear to the form user
Default Line Width: Default width of the line strokes
Default Circle Size: Default line width of the circle shape
What is the Review Page?
The Review Page component presents form users with a summary of their data before submitting the form. This component is code free and simple to configure, catering to non-developer users.
How do I use the Review Page?
The Review Page populates data from components that have already been added to the form. To set up the Review Page:
Add other components to the Form as needed.
Drag and drop the Review Page from the Premium Component group
Open Settings for the Review Page component, then click the Review Fields dropdown. This dropdown lists all of available fields within the form.
Select any single input field from the available components to add it to the list of fields that will be presented on the review page. The selection order of the components determines the order they appear on the Review Page.
Once the Review Page is configured, use the form to test out the summary. As the form is filled out, the Review Page outputs the data of the selected fields to the Summary section of the component.
Why should I use the Review Page?
Using the Review Page is a great way to give form users a chance to review their data before submitting the form, which can help reduce user errors and make for a better user experience.
Review Fields: Multi-Select dropdown that will populate all of the available fields within your form. Select any single input field from the list. The selection order of the components will also dictate the order they appear on the Review Page.
The Signature component allows the end-user to digitally sign a signature pad with either their finger on a touch-enabled device or with the mouse pointer. When the form is submitted, the Signature pad will be converted into an image and stored with the form submission.
Provider: This dropdown will determine what kind of Signature pad to use.
Default: Standard digital signature that can be signed upon form submission
Box Sign: Selecting Box Sign will allow you to set up an eSign workflow.
Custom components allow users to create a custom field using the JSON schema of other component types. When complete, these custom components will be rendered using a front-end application. This is a very useful and flexible option to create special or complex form fields that might not be offered with the out-of-the-box form builder.
To use a custom component, create a JSON definition of the field with the information needed to render it. Create a custom field and paste the JSON object into it. This must be a valid JSON object.
There are several properties that are required but you may add any additional properties that you would like.
Type: The type property will be used to select which component to render on the front end. It cannot be an existing field type.
Key: The key field is where the data will be saved to. This must be unique per field. For example, if key = 'customers' then the value of the field will be saved in data.customers.
Persistent: This will determine whether or not the value is saved to the main database. This is useful for using Remote Middleware, verify password fields or sending the data in an action but not saving it.
Protected: This will determine whether or not the field will be visible from the API. If it is a protected field then it will only be writeable but not readable.
Rendering: In order to render the custom component, the frontend application must register the component template. This is done in the config step with the formioComponentsProvider.
The template will then be used to render the component. In addition, a controller may be added to the template to create more interactive form elements.
This is a working example of a custom component. It is a Matrix checkbox that changes the number of columns and rows based on two other form fields.Type: The type property will be used to select which component to render on the front end. It cannot be an existing field type.
Key: The key field is where the data will be saved to. This must be unique per field. For example, if key = 'customers' then the value of the field will be saved in data.customers.
Persistent: This will determine whether or not the value is saved to the main database. This is useful for using Remote Middleware, verify password fields or sending the data in an action but not saving it.
Protected: This will determine whether or not the field will be visible from the API. If it is a protected field then it will only be writeable but not readable.
Rendering: In order to render the custom component, the frontend application must register the component template. This is done in the config step with the formioComponentsProvider.
The template will then be used to render the component. In addition, a controller may be added to the template to create more interactive form elements.
This is a working example of a custom component. It is a Matrix checkbox that changes the number of columns and rows based on two other form fields.
The Data Table enables the user to fetch large sets of data from external sources and present that data to the end-user in a table format. Think of the Data Table as an advanced select component, allowing the form designer to specify which data points from the external data object source should appear as selectable rows within the table for end-users.
Some settings will be added or removed depending on if the Fetch setting is enabled.
The Data table will fetch and present external data within the data table as selectable options for the end user. The Fetch Settings determines the source and method for retrieving external data that will populate within the Data table. When Fetch is enabled, data will not submit to the server unless configured to only submit rows selected by the end user.
Enable Fetch: If fetch is enabled, the DataTable will retrieve data from an external source.
Fetch Source Type: Retrieve the data from an internal Resource or external URL.
Submit Selected Rows: When the Submit Selected Rows option is enabled, the user can select the Data Table rows by clicking the row checkbox. The selection remains persistent across filtering, sorting, changing items per page, and pagination. After the form is submitted, only the data of the selected rows will be sent to the server.
Settings when Fetch Resource is enabled
Fetch Resource: Fetches submission data from internal Resources within your project.
Resource: The resource to be used to populate the data in the data table.
Components: Select the Resource fields that will display for the option row of the Data Table. Use the +Add Component button to add additional fields to the option row.
Default Sort Query: This sort query is used if the data table column sorting is not set.
Enable to Store Request Result in the Cache: Enabled by default, this setting stores requests and their results within the browser cache. When the Data Table attempts to request data from the same URL with identical parameters, cached data will be returned, enhancing performance. This option should be disabled If the data from the data source frequently changes and requires constant updates.
Settings when Fetch URL is enabled
Data Source URL: A URL that returns data. You can interpolate form data using curly bracket notation.
Request Headers: Set any headers that should be sent along with the request to the URL. This is useful for authentication.
Transform Data: Write custom code to transform DataSource data.
Form.io Authentication: When checked, Form.io authentication headers are added to the request to ‘Data Source URL’. Mainly used if Data Table data is requested from a Form.io endpoint.
Custom Fetch Provider: The name of a custom fetch provider. If not specified, the default URL provider is used
Default Sort Query: This sort query is used if the data table column sorting is not set.
Enable to Store Request Result in the Cache: Enabled by default, this setting stores requests and their results within the browser cache. When the Data Table attempts to request data from the same URL with identical parameters, cached data will be returned, enhancing performance. This option should be disabled If the data from the data source frequently changes and requires constant updates.
Sortable: Sort columns in ascending/descending order.
Filterable: Selectively display rows of data based on specific criteria or conditions. Provided filter operations such as "contains", "matches", "less than", "greater than", "equals", "not equals" and etc
Cell Max Width: Set the static width of the Data Table column width.
Clip Cells: Truncates data in a cell if it exceeds the width available within the column
Items Per Page: Set the default rows of data per page.
While not the primary use case of the Data Table, when Fetch is disabled, fields can be added to the Data Table for user input with 'Add Another' functionality.
Inline Editing: Actively edit the input fields without requiring the user to open the Data Table modal.
Show Add Button: Displays the button to add a new input row to the table.
Show Edit Button: Enables the user to edit an input row
Show Delete Button: Enables the user to delete an input row
Show Delete All Button: Enables the user to delete all input rows within the table.
A Dynamic Wizard allows you to collect an array of object values and then saved data is output to a table view as new rows are added. Filling an array element (field) occurs in steps, where each component inside the Dynamic Wizard is a separate step.
The principle of operation is based on the behavior of the Wizard. However, when you click the next step button, the current page of the Wizard remains the same until you have progressed through all of the fields within the Dynamic Wizard. The table view of the filled data appears with the successful passage of the last step, or when you click on the cancel button.
First, let's add a Data Grid to the form. Because we are going to fetch data with many entries we need the Data Grid to ensure we have the necessary rows to populate the states. Add two text fields called Name and Abbreviation. Ensure the for the fields matches the JSON values from the Fetch step.
for examples
Form Embed URL:
Show States Abbreviations Cheat Sheet using Data Source Form Embed URL:
CAPTCHA Provider: Select the provider integrated into your project: Google reCAPTCHA: Utilizes which returns a score for each request without user friction. The score is based on interactions on your form and can help determine if the score represents a human or malicious interaction. The reCaptcha results can be found in the metadata of the submission.
Cloudfare Turnstile: Upon submission, returns a cryptographically secured token within the metadata of the submission object. This token is sent with the form data, allowing the server to interpret and validate it to help protect against automated spam and abuse
A File component allows form users to upload and download files to a form. In order to use the File component, file storage must be set up in the project settings. See the help topic for the list of supported file storage providers.
Before a provider can be selected within the component, the file storage provider must first be integrated into the Form.io project. Refer to the help topic for more detailed instructions on establishing File Storage.
: File storage and retrieval using any S3 compatible service, specifically designed for Amazon Web Services S3.
: Set up a self-hosted solution, or use an existing service that can upload and serve files. For more information on how to set up the server, consider the .
: Upload files from hosted forms directly to an Azure Blob storage.
: Upload files to an integrated Google Drive platform.
For more information on how to specify file patterns and sizes, refer to the .
For detailed help with Nested Forms, refer to the deep-dive document.
Save as reference: Check if you’d like to save only _id of the child form submission instead of storing all child submission object inside of parent submission. This will also help all changes you’ve made in child submission be reflected in parent submission. If not checked, the entire child submission object will be saved. Any updates or changes made to the child submission data will not be reflected in the parent submission. Refer to the of the Nested Forms deep-dive document for additional information and guidance.
Dot Stroke Color: Default dot tag border-color configured using color identifier
Dot Fill Color: Default dot color set configured using color identifier
Default Stroke Color: Default color of the drawing strokes using color identifier
Default Fill Color: Default color of the shape fills using color identifier
If you are utilizing PDF downloads, it may not be beneficial to have the Review Page part of the output. To remove the Review Page from the PDF download, simply move the Review Page component inside a and add the following to the Panel settings viewer:hide. This will include the Review Page when a user is filling out the Form, but remove the component when viewing the PDF Download.
for more information
When using a component, the form designer can fetch data from a Resource, however, only one data point from the Resource submission object can be used as the Select value. In the screenshot below we can see the Select component connected to the Department Resource and the form designer is limited to choosing one value that will display for the component.
If you are looking for a visualized report displaying data from multiple form sources in a table grid format with pagination, filtering, and sorting capabilities, please see the documentation.
Because the Data Table includes pagination, filtering, and sorting capabilities, it is not recommended for most 'Add Another' use cases, we suggest utilizing the or .
While not the primary use case of the Data Table, when Fetch is disabled, fields can be added to the Data Table for user input with 'Add Another' functionality. Because the Data Table includes pagination, filtering, and sorting capabilities, it is not recommended for most 'Add Another' use cases, we suggest utilizing the or .
As of server version 9.3.0, the Dynamic Wizard has been migrated to the community contrib repository. to access the repository for information on installation and integrating the Dynamic Wizard component into the Form.io Platform.
Data Source
Store external data to perform form or application logic
CAPTCHA
Secure your forms with CAPTCHA technology V3
File
Upload files from your mobile camera or local machine
Nested Form
Reuse forms by inserting child forms into parent forms.
Tagpad
Tag points on an image with associated fields
Sketchpad
Draw or add predfined shapes on images
Review Page
Summary of data input of fields on the form.
Custom
Use field JSON schema to create custom fields.
Data Table
Fetch data from external sources for user selection.
