Advanced Components

Learn more about the Advanced Components
Advanced Components are often Basic Components that have been extended to meet more complex requirements. You can find information for each of the Advanced Components like unique settings, JSON code, and field examples below:
Email
Input field with validation ensuring email format.
​
URL
Input field with validation ensuring a URL format.
​
Phone Number
Input field with a mask that  allows numeric format.
​
Tags
Catergorize items on your form or use for tags for  logic. 
​
Address
Input field with Location provider support for address lookup and map.
​
Date & Time
Input or select a date and time for a calendar picker widget. 
​
Day
A three field component that represents Day/Month/Year.
​
Time
Input to add a time or select a time from a predefined widget.
​
Currency
Input field that supports many different currency types. 
​
Survey
Questions and correlated answers in survey format. 
​
Email
The Email component is a string field that carries special input validation ensuring the entered data is in a valid email format. A valid email address consists of an email prefix and an email domain, both in acceptable formats. 
Unique Settings
Field Examples
Guidance
JSON
Realtime Kickbox.io Validation: In addition to the normal email format validation, bring real-time Email validation through our integration with Kickbox.io. For more information on how this works, please check out the Kickbox Integration section.
Use the Validate On 'Blur' setting to ensure validation formatting is only triggered when the user has left the field. 
When using an Email action on your form, interpolate the email data and send off the email action to  the email address entered in the field
{{ data.email }}
{
  "label": "Email",
  "tableView": true,
  "key": "email",
  "type": "email",
  "input": true
}
Specific Properties
Property
Description
Value
Required
Default
kickbox.enabled
If the Kickbox validation should be enabled for this email input
boolean
false
false
​Click here for a full list of JSON Schema definitions​
URL
Similar to the Email field, the URL component is a string field that carries special input validation ensuring the entered data is in a valid URL format. Validation will check to see if the entered input data is at least in the correct format to potentially be a legitimate URL.
Unique Settings
Field Examples
Guidance
JSON
There are no unique settings for the URL component.
Use the Validate On 'Blur' setting to ensure validation formatting is only triggered when the user has left the field. 
{
  "label": "Url",
  "tableView": true,
  "key": "url",
  "type": "url",
  "input": true
}
​Click here for a full list of JSON Schema definitions​
Phone Number
The Phone Number field carries an input mask to force the user to enter the field data in Phone Number format.
EG (123) 123-1234
Unique Settings
Field Examples
Guidance
JSON
There are no unique settings for the Phone Number component.
Use the Validate On 'Blur' setting to ensure validation formatting is only triggered when the user has left the field. 
{
  "label": "Phone Number",
  "tableView": true,
  "key": "phoneNumber",
  "type": "phoneNumber",
  "input": true
}
Specific Properties
Property
Description
Value
Required
Default
inputMask
The input mask for this phone number input.
A valid input mask
true
(999) 999-9999
​Click here for a full list of JSON Schema definitions​
Tags
The Tag component draws attention to or categorizes elements on your form. Multiple tags can be added to one Tag field. 
Unique Settings
Field Examples
Guidance
JSON
Delimiter: The character used to separate tags
Max Tags: The maximum amount of tags that can be added. 
Store As: Determines how the tag data will be stored once submitted. 
String (CSV)
Array of Tags
To draw attention to new, important content. Tags can focus attention on important content that might otherwise be missed.
Business Logic. Use tags to facilitate form-level or application-level logic and conditional workflows.
{
  "label": "Tags",
  "tableView": false,
  "key": "tags",
  "type": "tags",
  "input": true
}
​Click here for a full list of JSON Schema definitions​
Address
The Address component is a special component that performs an address lookup based on user input using several map and location providers as well as Custom Provider support. Address data can also be entered in free form and will save the address as well as geolocation and other metadata. 
Google Map Integration Guide
Due to recent changes to the Google Maps API usage policies, an enabled Maps Javascript API and valid Maps API Key are required for all Address lookups using the Google Maps provider. Follow the instructions below to generate your Google Map API key.
Navigate to the Google Maps Platform and click the Get Started button
Follow the steps and Google will create a Project and Maps API key. Copy the API key and ensure you check the 'Enable all Google Maps API's for this project' setting 
If you've never used the Google Cloud Platform before, follow the steps below to generate an API key. 
​
​
Navigate to the Google Maps Platform and click the ' Enabled API's and services' tab to view enabled API's (ensure the Maps Javascript API is included in the 'API's and services' section)
​
​
Click the Credential tab to review or copy your Map API key if you did not do so in the previous step
​
​
It's advised to restrict your API key to prevent unauthorized usage. Edit your API key to add restriction parameters
​
​
Login to Form.io and add an Address component to a form
Inside the Address settings, click the Provider tab, select Google Maps, and paste your Google Maps API key
​
​
Use the form and the Address component will perform a lookup and populate results as the user inputs data into the field
​
​


Unique Settings
Field Examples
Guidance
JSON
Enable Manual Mode: Checking this setting adds a checkbox under the Address field. Should the user check this, the address lookup through the location provider is disabled, and the traditional address field will display for manual input (Address, City, State, Zip etc)
Switch To Manual Mode Label: The label of the checkbox used for the 'Enable Manual Mode' setting. 
Disable Clear Icon: Removes the 'x' clear icon found at the far right of the field. You may want to check this setting to prevent any users from accidentally clicking the icon. 
​
Providers
Form.io is integrated with several Location and Map providers for fast and easy address lookup and geolocation data. 
Azure Maps: Set up your own Azure Map account and provide the subscription key to enable this map provider. 
Open Street Map Nominatim: Nominatim is a tool to search OSM data by name and address and to generate synthetic addresses of OSM points
Custom: Provides settings to integrate your own custom map provider.
Google Maps: Set up a Google Map API to utilize Google's location and map technology. Please see the documentation above for a full guide on integration setup with Form.io
Manual Mode View String: Specify the template to be used when querying the view string for component values entered in manual mode. This string is used in the table view, CSV export, and email rendering. When left blank combined value of all components joined with a comma will be used.
Coming Soon...
{
  "label": "Address",
  "tableView": false,
  "provider": "nominatim",
  "key": "address1",
  "type": "address",
  "providerOptions": {
    "params": {
      "autocompleteOptions": {}
    }
  },
  "input": true,
  "components": [
    {
      "label": "Address 1",
      "tableView": false,
      "key": "address1",
      "type": "textfield",
      "input": true,
      "customConditional": "show = _.get(instance, 'parent.manualMode', false);"
    },
    {
      "label": "Address 2",
      "tableView": false,
      "key": "address2",
      "type": "textfield",
      "input": true,
      "customConditional": "show = _.get(instance, 'parent.manualMode', false);"
    },
    {
      "label": "City",
      "tableView": false,
      "key": "city",
      "type": "textfield",
      "input": true,
      "customConditional": "show = _.get(instance, 'parent.manualMode', false);"
    },
    {
      "label": "State",
      "tableView": false,
      "key": "state",
      "type": "textfield",
      "input": true,
      "customConditional": "show = _.get(instance, 'parent.manualMode', false);"
    },
    {
      "label": "Country",
      "tableView": false,
      "key": "country",
      "type": "textfield",
      "input": true,
      "customConditional": "show = _.get(instance, 'parent.manualMode', false);"
    },
    {
      "label": "Zip Code",
      "tableView": false,
      "key": "zip",
      "type": "textfield",
      "input": true,
      "customConditional": "show = _.get(instance, 'parent.manualMode', false);"
    }
  ]
}
Specific Properties
Property
Description
Value
Required
Default
map
A description of the map settings for configuring the Google Maps API
map.region - The region configuration for the map.
map.key - The API key for the Google Maps integration.
false
{}
​Click here for a full list of JSON Schema definitions​
Date & Time
The Date/Time component is a powerful and flexible component that offers many options for validation, date ranges, and calculations using Moment.js. 
Unique Settings
Field Examples
Guidance
JSON
Display In Timezone: This will display the captured date time in the selected timezone.
Of Viewer
Of Submission
Of Location
UTC
Use Local Settings: Use the Date/Time of your local machine
Allow Manual Input: Set by default, this setting will allow you to use your keyboard to input the value. When unchecked, the user will only be able to select the Date and Time from the calendar widget.
Format: The format the Date/Time will display in. By default, the format will be set to:
yyyy-MM-dd hh:mm a
Use formats provided by DateParser Codes for more options 
​
Date
Enable Date Input: Enables selectable dates in the calendar widget and user input.
Disable Specific Dates: Blacklist certain dates by providing a date in the following format:
(yyyy-MM-dd) or (yyyy-MM-dd - yyyy-MM-dd)
Custom Disabled Dates: Write Javascript to customize your disabled dates
// Disable all weekends
date.getDay() === 0 || date.getDay() === 6
Disable Weekends/Weekdays: Disables the selected days from the calendar picker. 
​
Time
Enable Time Input: Enable or Disable the time input.
Hour/Minute Increment: Change the increment value when selecting a time from the Calendar Widget using the increment buttons. 
12 Hour Time (AM/PM): Display time in 12-hour time with AM/PM.
​
Data
Flatpickr options: add new/override current Flatpickr options.
This field can be used to set the options of Flatpickr library, that is used to create the datepicker widget. Full list of the options can be found here.
It can also be used to set a translation for the datepicker. To do so, the user has to provide a value to the locale variable. In the following example, translation is set to French with the shorthand name of the locale:
{ "locale": "fr" }
Full list of the available locales and their shorthand names can be found here.
​
Validation
Default Date: Set a default Date and Time when a user renders the form. Utilize Moment.JS to set dynamic date ranges.
For example, this code will default the date to 10 days prior to the current date.
moment().subtract(10, 'days')
Use Calendar To Set Min/Max Date: Click in the setting field to open a Calendar to pick the minimum or maximum date. 
Use Moment.js To Set Min/Max Date: Check this if you would rather use Moment.js to set your dates rather than the calendar picker 
Coming Soon...
{
  "label": "Date / Time",
  "customClass": "pl-3 pr-3",
  "tableView": false,
  "datePicker": {
    "disableWeekends": false,
    "disableWeekdays": false
  },
  "enableMinDateInput": false,
  "enableMaxDateInput": false,
  "key": "dateTime",
  "type": "datetime",
  "input": true,
  "widget": {
    "type": "calendar",
    "displayInTimezone": "viewer",
    "locale": "en",
    "useLocaleSettings": false,
    "allowInput": true,
    "mode": "single",
    "enableTime": true,
    "noCalendar": false,
    "format": "yyyy-MM-dd hh:mm a",
    "hourIncrement": 1,
    "minuteIncrement": 1,
    "time_24hr": false,
    "minDate": null,
    "disableWeekends": false,
    "disableWeekdays": false,
    "maxDate": null
  }
}
​Click here for a list of the Date/Time properties specific to this component​
​Click here for a full list of JSON Schema definitions​
​
Day
The Day component is used to enter values for the Day, Month, and Year using a number or select type of field.
Unique Settings
Field Examples
Guidance
JSON
Hide Input Labels: Hide the labels of component inputs. Labels will be visible when using the Form Builder but hidden when the form is rendered. 
Type of Input: Determines the type of input the user will use for the field.
Numer - User inputs a number to represent the field
Select - User will select a value relative to the field.
Hidden: When checked, this specific field will be hidden from the set of Day components
Day First: When checked, the day field will display first from the set of Day components
Placeholder: Text displayed inside the field and removed when there is user input.
Coming Soon...
{
  "label": "Day",
  "hideInputLabels": false,
  "inputsLabelPosition": "top",
  "useLocaleSettings": false,
  "tableView": false,
  "fields": {
    "day": {
      "hide": false
    },
    "month": {
      "hide": false
    },
    "year": {
      "hide": false
    }
  },
  "key": "day",
  "type": "day",
  "input": true,
  "defaultValue": "00/00/0000"
}
The Date/Time has many unique properties, follow the link for more information.
​Click here for a full list of JSON Schema definitions​
Time
A stand-alone time field for manual input or a time selector widget. 
Unique Settings
Field Examples
Guidance
JSON
Input Type: The type of widget the Time field will use:
HTML5, Text input with mask
Format: Set the formatting for the time when the Text input with mask setting is set.
Coming Soon...
{
  "label": "Time",
  "customClass": "pr-3 pl-3",
  "tableView": true,
  "key": "time",
  "type": "time",
  "input": true,
  "inputMask": "99:99"
}
Property
Description
Value
Required
Default
format
The time format for display of the captured time.
Any valid time format string
true
HH:mm
​Click here for a full list of JSON Schema definitions​
Currency
Use the Currency component when a field should display currency amounts on the field. This component holds a numeric input mask that allows two decimal values and automatically adds commas as a user inputs a currency amount. The type of currency can also be selected which will change the prefix currency symbol.
Unique Settings
Field Examples
Guidance
JSON
Currency: The type of currency symbol and format the field will display when a user inputs into the field. 
Coming Soon...
{
  "label": "Currency",
  "mask": false,
  "spellcheck": true,
  "tableView": false,
  "currency": "USD",
  "inputFormat": "plain",
  "truncateMultipleSpaces": false,
  "key": "currency",
  "type": "currency",
  "input": true,
  "delimiter": true
}
​Click here for a full list of JSON Schema definitions​
Survey
The Survey component works similarly to the radio. Instead of one question, users are able to select a value for multiple questions which are configured within the component settings. Survey is a great component to utilize when asking multiple questions with the same context of answers or values.
Unique Settings
Field Examples
Guidance
JSON
Questions: The questions presented to the user, displayed vertically in the left-hand column
Values: Values are the answer that can be selected for each question.
Tooltip: Add a tooltip to any of the Questions or Values to help better communicate with your users. 
Examples
Response Calculation:
In some cases, you may want to set up logic on a Number field to calculate the average of the survey responses. To start, ensure the answers for your Survey component are represented by numeric values.
Add a Number field to your form and add the following logic:
value = Object.values(data.survey).reduce(function(sum, value) {  return sum + parseInt(value); }, 0);
The data.survey within. code above is the the Property Name of the Survey component
Navigate to https://formio.github.io/formio.js/app/sandbox and use the following ID for a hands-on example:
631a5562621b15344c769e42 
{
  "label": "Product Rating",
  "customClass": "pl-3 pr-3",
  "tableView": false,
  "questions": [
    {
      "label": "Ease of Use",
      "value": "easeOfUse",
      "tooltip": "Was our product easy to use without any problems?"
    },
    {
      "label": "Customer Support",
      "value": "customerSupport",
      "tooltip": "Was our customer support team timely and effective?"
    },
    {
      "label": "Onboarding Process",
      "value": "onboardingProcess",
      "tooltip": "Was our onboarding process easy to follow and execute?"
    }
  ],
  "values": [
    {
      "label": "Very Dissatisfied",
      "value": "1",
      "tooltip": ""
    },
    {
      "label": "Dissatisfied",
      "value": "2",
      "tooltip": ""
    },
    {
      "label": "No Opinion",
      "value": "3",
      "tooltip": ""
    },
    {
      "label": "Satisfied",
      "value": "4",
      "tooltip": ""
    },
    {
      "label": "Very Satisfied",
      "value": "5",
      "tooltip": ""
    }
  ],
  "key": "survey",
  "type": "survey",
  "input": true
}
Specific Properties
Property
Description
Value
Required
Default
questions
An array of question objects
An array of question objects, where each question object contains the following properties.
label - The label of the question.
value - The value of this question used to store the value of this component.
true
[]
values
An array of value objects
Array of value objects, where each item in the array has the following properties.
label - The label to show for this value
value - The value of this radio input
true
[]
​Click here for a full list of JSON Schema definitions​
​
Property	Description	Value	Required	Default
kickbox.enabled	If the Kickbox validation should be enabled for this email input	boolean	`false`	`false`
Property	Description	Value	Required	Default
inputMask	The input mask for this phone number input.	A valid input mask	`true`	(999) 999-9999
Property	Description	Value	Required	Default
map	A description of the map settings for configuring the Google Maps API	map.region - The region configuration for the map. map.key - The API key for the Google Maps integration.	false	{}
Property	Description	Value	Required	Default
format	The time format for display of the captured time.	Any valid time format string	`true`	`HH:mm`
Property	Description	Value	Required	Default
questions	An array of question objects	An array of question objects, where each question object contains the following properties. label - The label of the question. value - The value of this question used to store the value of this component.	`true`	[]
values	An array of value objects	Array of value objects, where each item in the array has the following properties. label - The label to show for this value value - The value of this radio input	`true`	[]
Basic Components
Layout Components
Last modified 11d ago