Basic Components

The Basic Components section of the Form Builder includes commonly used elements essential for creating interactive and user-friendly forms. These components are found at the top of the components list.

Each component includes configurable settings and usage guidance to help user implement it effectively.

Component	Description	Use Case
Text Field	Short, general text input. Supports input masks, validations, and date/time picker.	General text entry, formatted inputs, and date/time selection.
Text Area	Multi-line text input. Includes WYSIWYG editor, image upload, and row control.	Rich text editing, media embedding, and long-form content.
Number	Numeric input only. Configurable options for thousands separators, decimal places, and decimal requirements.	Restricts input to numbers with formatting and precision controls.
Checkbox	Boolean input	Boolean input allowing true/false selection.
Select Box	Multi-select checkboxes. Supports static/dynamic data and min/max validation.	Multiple selections from a list with validation.
Select	Dropdown list	Dropdown menu for selecting one value from a list.
Radio	Single option selection. Can be deselectable and supports static/dynamic values.	Choose one mutually exclusive option.
Button	Trigger actions	Triggers actions or events for custom logic within the form.

Text Field

The Text Field Component is a fundamental input element used for capturing short and general text entries in forms. It offers flexibility in both functionality and formatting, making it suitable for a wide range of use cases—from simple text input to structured data entry and even date/time selection.

Widget Settings

The Widget setting determines how the input field is rendered.

Widget Type	Description
Default Widget	A standard text input field for general text entry.
Calendar Picker	Converts the Textfield into a string-based calendar widget for date/time selection. Stores plain strings unaffected by timezone or location.

Unique Settings	Description
Input Mask	Enforces a specific format for user input (e.g., phone numbers, postal codes).
Display Mask	Formats the input for display only; does not affect the saved value.
Apply Mask On	Specifies when the component should triggers the configured mask. The default is Change. Change: Applies the mask when the input value changes (default). Blur: Applies the mask when the field loses focus (i.e., when the user clicks away from the field).
Allow Multiple Masks	Enables a dropdown for users to select from multiple predefined masks.
Input Masks	A configuration table that appears only when Allow Multiple Masks is enabled. It allows adding multiple mask options for the same field. Each row includes: Label: A user-friendly name for the mask (e.g., "phone 1"). Mask: The actual mask applied to the input (e.g., (999) 999 9999 or 999-999-9999).

Text Area

A multi-line input field is ideal for longer text entries. It can be converted to WYSIWYG editor for rich text formatting.

Unique Settings	Description
Rows	Sets the initial number of visible rows in the text area.
Editor	Converts the text area into a WYSIWYG editor. Options: Ace, CKEditor, Quill.
Auto Expand	Automatically increases the height as the user types.
Enable Image Upload	Allows image uploads within the WYSIWYG editor when enabled.
Image Upload Storage	Allows selection of the storage option within the project for saving uploaded images.
Save As	Determines how the value should be stored in the database. Options include: String JSON HTML

Rich text editors may impact accessibility.

Number

This field restricts input to numeric values only, ensuring data consistency for number-based entries.

Unique Settings	Description
Thousands Separator	Separates thousands in the value using the local delimiter.
Decimal Places	Sets the maximum number of decimal digits.
Require Decimals	Ensures decimal values are always shown, even with trailing zeros.

Checkbox

A binary input component representing true/false values. Users can assign keyboard shortcuts and modify the input type.

Unique Settings	Description
Shortcut	Assigns a shortcut key to check/uncheck the component.

Select Box

The Select Box is a multi-valued form element that allows users to choose one or more options, displayed in a checkbox-style format. It supports both static and dynamic data sources and includes various customization and validation settings.

Unique Settings	Description
Data Source Type	Defines how options are populated: either manually (Values) or dynamically (Data Source URL).
Data Source Values	Static list of options. Each option includes: Label – Displayed to users Value – Stored in the database (must be string or number).
Data Source URL	URL providing option data in JSON format.
Value Property	Specifies which property from the JSON object is stored as the backend value. This is required when the Data Source URL returns an array of objects. If the Data Source URL is a single string (not an array), the Value Property setting can be left empty. Use only strings or numeric values for option values.
Item Template	HTML template that defines how each option is displayed in the UI using template syntax (e.g., {{ item.name }}).
Shortcut	Assigns a keyboard shortcut for the defined options.
Options Label Position	Sets the position of the label relative to the checkbox (e.g., left, right).
Inline Layout	Displays options horizontally instead of vertically.
Min/Max Checked Number	If the number of checked options is below the minimum required, front-end validation will trigger an error message prompting the user to select more options. When the maximum allowed number of options is checked, all remaining unchecked options will become disabled, preventing further selections.
Min/Max Checked Error Message	Define the error messages shown when selection limits are violated.

Select

The Select component displays a dropdown list of values from which users can choose one option. It supports various data sources and offers extensive configuration options for filtering, querying, and loading data.

Unique Setting	Description
Widget Type	Choose the dropdown type: Choices.js or HTML5. It is advised to integrate Choices.js when implementing select boxes or input fields. This library significantly enhances the user experience by providing advanced features such as search functionality, multi-select capabilities, and customizable styling options.
Unique Options	Removes duplicate values from the dropdown.
Multiple Values	Enables multi-select with a tag-style display.
This feature only works
with Choices.js.
Data Source Type	Specify the source of dropdown values: Value, URL, Resource, Raw JSON, or Custom.
Storage Type	Define the data storage format: String, Number, Boolean, or Object.
ID Path	Provide the path to extract the option ID.
Item Template	Define the HTML template for rendering options (e.g., {{ item.value }}).
Request Headers	Adds custom headers for API requests (e.g., authentication).
Data Path	Specify the path to iterable items in the response (e.g., results.items).
Value Property	Set the property used as the select value. (Defaults to the item itself.)
Disable Limiting Response	Prevents limit and skip parameters from being included in the query.
Search Query Name	Define the name of the search query parameter for filtering (e.g., type).
Search Request Delay	Set the delay before sending the search request. (Default: 0.3 seconds.)
Filter Query	Add additional query parameters for filtering.
Sort Query	User can use a text field–based sort query to sort the results.
Disable Storing Request Result in Cache	Select this option if the user does not want requests and their results to be stored in the cache. By default, responses are cached. If a subsequent request is made to the same URL with identical parameters, the cached data will be returned. Caching improves performance; however, if the remote source data changes frequently and the user requires the most up-to-date information, this option should remain unchecked.
Limit	Limits number of items shown initially (e.g., 10).
Refresh Options On	Refreshes dropdown based on changes in other fields.
Refresh Options On Blur	Refreshes dropdown when a field loses focus.
Clear Value Option On Refresh	Clears selected value when options are refreshed.
Enable Static Search	Enables search within static list of items
Disable Options Refresh When Scrolling	When enabled, the select component with a search input will not make additional API requests while scrolling through the list of options.
Search Threshold	Set match sensitivity. (Default: 0.3, range: 0.0 to 1.0.)
Read Only Value	Displays value in read-only mode.
Choices.js Options	Provide raw JSON configuration for Choices.js.
Use Exact Search	Disable fuzzy search; allow only exact matches.

Radio

The Radio Component is a form field that allows users to select one option from a list displayed in a radio-style format. A unique feature of this component is that users can deselect a selected option by clicking it again, which resets the field to its original state.

Unique Settings	Description
Data Source - Values (Static List)	Manually define options with: Label – Displayed to the user Value – Saved to the database (must be string or numeric)
Data Source URL (Dynamic List)	Use an external URL to fetch options dynamically: Value Property – Part of the object saved in metadata Item Template – Displayed label
Shortcut	Assign a keyboard shortcut to a specific option for quick access.
Options Label Position	Set the label position relative to the radio bubble (e.g., left, right, top).
Inline Layout	Display radio options horizontally instead of vertically.

User can also customize the button’s appearance and theme.

Button

The Button Component is a versatile element in form design, primarily used to perform actions such as submitting data, triggering workflows, or resetting fields. While its most common use is for form submission, it can be configured to support a wide range of actions, making it a powerful tool for enhancing user interaction and workflow automation.

Unique Settings	Description
Action	Defines the behavior triggered when the button is clicked. Available options include: Reset: Restores all form fields to their original (pristine) state. Event: Triggers a custom event, typically tied to application or workflow logic. Post to URL: Sends form data to a specified URL. Custom: Executes user-defined code for advanced or tailored functionality.
Theme	Sets the button's color theme using Bootstrap classes.
Size	Defines the button size (e.g., small, medium, large).
Block Button	Makes the button span the full width of the form.
Left/Right Icon	Adds an icon to the left or right of the button label using Font Awesome classes.
Disable on Form Invalid	Disables the button if any form field is invalid.