LogoLogo
Getting StartedDevelopersDeployment GuideGet Help
  • Quick Links
  • Welcome to Form.io
    • Getting Started With Form.io
    • Launch a Form
    • Overview of Form.io
  • Developer Tool Ecosystem
    • PDF Solution
    • Enterprise Form Builder
    • Form View Pro
    • The Security Module
    • Accessibility Compliance Module
    • Developer License
    • SQL Connector - Deprecated
    • Integration Libraries
    • Form.io CLI Tool
  • User Guide
    • Introduction
    • Form.io Developer Portal
    • Teams
    • Projects
      • Project UI
      • Project Settings
      • Stages
      • Multi-Tenancy
    • Resources
      • ResourceJS
    • Forms
      • Form Creation
      • Form Types
      • PDF Forms
      • Embedding a Form
      • Form Revisions
      • Form Settings
    • Form Building
      • Form Builder UI
      • Form Components
        • Component Settings
        • Basic Components
          • Resource as Select Component Data Source
        • Advanced Components
        • Layout Components
        • Data Components
        • Premium Components
          • Nested Forms
        • Custom Components
      • Logic & Conditions
      • Existing Resource Fields
      • Actions
    • Submissions
      • Accessing Submissions
      • Importing Submissions
    • Form.io eSignature - Coming Soon
    • Form.io Reporting Module
    • PDF Template Designer
    • Form View Pro
    • Form Manager
    • Enterprise Form Builder Module
      • Installation
      • User Guide
  • Developer Guide
    • Introduction
      • Application Development
      • API Documentation
    • Form Development
      • Form Renderer
      • Form Builder
      • Form Embedding
      • Form Evaluations
      • Form Templates
      • Custom Components
      • Translations
    • JavaScript Development
      • JavaScript SDK
      • JavaScript Frameworks
      • JavaScript Utilities
    • Authentication and Authorization
      • SAML
      • OAuth
      • LDAP
      • Resource Based Authentication
      • Email Authentication
      • Two-Factor Authentication
    • Roles and Permissions
      • Field Match-Based Access
      • Field-Based Resource Access
      • Group Permissions
    • Integrations
      • Email Integrations
      • File Storage
      • Google Developer Console
      • eSign Integrations
      • Relational Databases
    • Modules
    • Fetch Plugin API
    • CSS Frameworks
    • Offline Mode
    • Audit Logging
  • Deployments
    • Self-Hosted Deployment
      • Local Deployment
        • Local File Storage
      • Kubernetes
      • Cloud Deployment
        • AWS Deployment
          • AWS Lambda
          • Form.io/AWS Elastic Beanstalk End-To-End Encrypted Deployment
        • Azure Deployment
          • Azure App Service
            • Azure MSSQL Connector - Deprecated
          • Azure Virtual Machine
          • Azure Kubernetes Service
          • Set up the DB
        • GCP Deployment
          • GCP Cloud Run
      • On-Premise Deployment
      • Enterprise Server
      • PDF Server
    • Deployment Configurations
      • DNS Configuration
      • Load Balancer Configuration
    • Licenses
      • License Management
      • Library Licenses
    • Portal Base Project
      • Portal SSO
      • Portal Translations
    • Maintenance and Migration
      • Changes to Premium Libraries
  • FAQ
    • FAQ
    • Tutorials & Workflows
      • Password Reset
      • Dynamic Select Filtering
      • Approval Workflow
      • SSO Email Token
      • Embedding A Video
      • Data Source Validation
      • Select Data Source Options
      • Nested Form Workflows
        • Nested Wizard Forms
      • Save as Draft
      • Role-Based Conditions
      • Custom Component
      • Dynamic Radio and Select Box Values
      • Override CKEDITOR
    • Errors
    • Examples
    • License Utilization Checks
    • Glossary of Key Concepts
  • Contact Us
Powered by GitBook
On this page
  • Email
  • URL
  • Phone Number
  • Tags
  • Address
  • Date & Time
  • Day
  • Time
  • Currency
  • Survey
  • Signature

Was this helpful?

  1. User Guide
  2. Form Building
  3. Form Components

Advanced Components

Learn more about the Advanced Components

PreviousResource as Select Component Data SourceNextLayout Components

Last updated 2 months ago

Was this helpful?

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

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.

  • 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

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.

There are no unique settings for the URL component.

{
  "label": "Url",
  "tableView": true,
  "key": "url",
  "type": "url",
  "input": true
}

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

There are no unique settings for the Phone Number component.

{
  "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

Tags

The Tag component draws attention to or categorizes elements on your form. Multiple tags can be added to one Tag field.

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
}

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.

  1. 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)

  1. 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

  1. Login to Form.io and add an Address component to a form

  1. Inside the Address settings, click the Provider tab, select Google Maps, and paste your Google Maps API key

  1. Use the form and the Address component will perform a lookup and populate results as the user inputs data into the field

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.

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

{}

Date & Time

What Type of Date/Time Field Should I Use?

Example: Birthday Field

If you're designing a form that includes a field for users to select their birthday, the Textfield Calendar Widget is an ideal choice. Since the date is a static string, the birthday remains unchanged no matter where the submission is viewed or what timezone the viewer is in.

Date/Time Component

This component stores data as an ISO 8601 date, making it ideal for forms that require precise date/time handling, filtering, and validation. Due to its ISO-based format, it's also the preferred choice when timezone awareness is necessary.

Example: Live Stream Event Field If you're designing an invitation form that includes a date field indicating the time of an event, the Date/Time component is an ideal choice. Since the component uses the ISO date format, the event date and time can automatically adjust to match the viewer’s local timezone, informing the user of the correct event time based on their location.

Display In Timezone: This setting will determine how the user will view the captured Date/Time based on the type of Timezone value selected. These settings can dynamically change based on the user's location and setting type.

Of Viewer Date/Time values will display in the viewer's local time zone, automatically adjusting according to the user's location. Use this setting when the value should display in the user's local time zone.

Of Submission Use this setting to maintain the submission’s original timezone. When the submission is viewed in a different timezone, an indicator will display within the field showing the original timezone.

Of Location When this value is set, a new dropdown field will appear within the Date/Time component settings where a specific timezone is selected. Date/Time data will display based on the timezone location specified within the settings. When a submission is viewed from a location other than the set location, an indicator showing the set time zone will appear next to the value. Use this setting when the value should display in a set timezone.

UTC Date/time values are displayed in UTC, ensuring a standardized reference point across all users and systems. This setting is ideal when uniformity is required, regardless of the viewer's local time zone. Use this setting when the value should consistently display in 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

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.

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" }

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 set the date to 10 days before the current date by default

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
  }
}

Day

The Day component is used to enter values for the Day, Month, and Year using a number or select type of field.

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:

  • Number - Number input that represents the field

  • Select - Select values representing the date option

Hidden: When checked, this specific field (day/month/year) will be hidden from the set of Day components. When a field is hidden, that value will be absent from the value as stored in the submission. For example, enabling Hidden on the component and entering January 2024 will be saved as 01/2024.

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.

Following the release of Form.io Enterprise 9.3.0, the value recorded for any unfilled field is an empty string (''). Prior to this release, empty fields were interpreted as '0'.

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"
}

Time

A stand-alone time field for manual input or a time selector widget.

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

Currency

Use the Currency component when a field needs to display monetary amounts. 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.

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
}

Survey

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 Property Name of the Survey component

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

[]

Signature

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.

Realtime Kickbox.io Validation: In addition to the normal email format validation, bring real-time Email validation through our integration with . For more information on how this works, please check out the section.

Use the setting to ensure validation formatting is only triggered when the user has left the field.

Use the setting to ensure validation formatting is only triggered when the user has left the field.

Navigate to the 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.

Azure Maps: Set up your own account and provide the subscription key to enable this map provider.

Open Street Map Nominatim: is a tool to search OSM data by name and address and to generate synthetic addresses of OSM points

The Date/Time component is a powerful and flexible option that supports advanced features such as validation, date range restrictions, and date calculations using . It stores data as an ISO 8601 date, making it ideal for forms that require precise date/time handling, filtering, and validation. Due to its ISO-based format, it's also the preferred choice when timezone awareness is necessary.

Form.io provides two different Date and Time picker components: a string-based with an integrated Calendar Widget, and a dedicated Date/Time picker component. Choosing which component to use depends on the use case of your user base and application.

Textfield Component with Calendar Widget: A string-based component with an integrated Calendar Widget. This component stores dates as plain strings, meaning the saved values remain fixed and do not adjust based on the user's location or timezone. When viewing the submitted data, it will appear exactly as entered, regardless of where or when it's viewed.

Use formats provided by for more options

This field can be used to set the options of the Flatpickr library, which is used to create the datepicker widget. A full list of the options can be found .

A full list of the available locales and their shorthand names can be found .

The Date/Time has many unique properties, for more information.

The Survey component works similarly to the component. 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.

Navigate to and use the following ID for a hands-on example:

for more information

Kickbox.io
Kickbox Integration
Click here for a full list of JSON Schema definitions
Validate On 'Blur'
Click here for a full list of JSON Schema definitions
Validate On 'Blur'
Click here for a full list of JSON Schema definitions
Click here for a full list of JSON Schema definitions
Google Maps Platform
Azure Map
Nominatim
Click here for a full list of JSON Schema definitions
Moment.js
Textfield
Textfield
DateParser Codes
here
here
Click here for a list of the Date/Time properties specific to this component
Click here for a full list of JSON Schema definitions
follow the link
Click here for a full list of JSON Schema definitions
Click here for a full list of JSON Schema definitions
Click here for a full list of JSON Schema definitions
Radio
https://formio.github.io/formio.js/app/sandbox
Click here for a full list of JSON Schema definitions
Click Here

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.

Signature

Digitally sign on a signature pad.