Skip to main content

Advanced Components

Learn more about the Advanced Components

Advanced Components are enhanced versions of Basic Components designed to handle more complex use cases. Detailed information for each Advanced Component—including unique settings, JSON configuration, and field examples—is provided below.

Email​

The Email component is a specialized text field designed to collect valid email addresses. It includes built-in validation to ensure the input follows the correct email format — consisting of a prefix (the part before the “@”) and a domain (the part after the “@”). This helps prevent users from entering invalid or incorrectly formatted email addresses.

Realtime Kickbox.io Validation: In addition to the normal email format validation, bring real-time Email validation through our integration with Kickbox.io.

URL​

Like the Email component, the URL component is a text field with built-in validation to ensure the input follows a valid URL format. This validation checks that the entered data conforms to the structure of a potentially legitimate URL.

There are no unique settings for the URL component.

Phone Number​

The Phone Number field uses an input mask to ensure data is entered in a proper phone number format, for example: (123) 123-1234.

There are no unique settings for the Phone Number component.

Tags​

The Tag component is used to highlight or categorize elements within a form. You can assign multiple tags to a single 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

Address​

The Address component allows users to search for addresses using multiple map and location providers, including support for custom providers. Users can also enter addresses manually, with the component saving the address along with geolocation and other related metadata.

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

workspace builder 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.

Date & Time​

The Date/Time component is a versatile field supporting advanced features like validation, date range limits, and calculations via Moment.js. It stores values in ISO 8601 format, making it suitable for precise date/time handling, filtering, and timezone-aware applications.

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.

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.

Time​

A dedicated Time field that allows users to enter a time manually or select it using a time picker 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.

Currency​

The Currency component is used to capture and display monetary values. It provides a numeric input mask supporting two decimal places and automatically formats numbers with commas. You can also select the currency type, which updates the prefix symbol accordingly.

Currency: The type of currency symbol and format the field will display when a user inputs into the field.

Survey​

The Survey component functions like the Radio component but allows users to answer multiple questions at once. Each question is configured within the component settings, making it ideal for collecting responses with consistent answer options across several questions.

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.

Signature​

The Signature component lets users provide a digital signature using a finger on touch devices or a mouse pointer. Upon form submission, the signature is captured as an image and saved with the 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.