Components Overview

The Activity builder supports the following components for building integrations. Each component provides specific functionality and can be configured according to your needs.

📄️ Common Properties

These are the common properties of a field (inside the meta field).

📄️ Array Component

The Array (array) component handles dynamic arrays of form fields, allowing users to add, remove, and manage items in the array and also support nested arrays. It uses Material-UI's Accordion component for better organization and user experience.

📄️ Auto-Complete

The Autocomplete component provides an enhanced input field with autocomplete functionality using Material-UI's Autocomplete component. It supports single and multiple selections, custom options, and additional actions.

📄️ Button

Here are additional JSON schemas for different button configurations:

📄️ Checkbox

The Checkbox component can be used in any form to provide a set of checkboxes.

📄️ Code

The Code component allows users to input multi-line code snippets with configurable options such as fullscreen, language, size, and showSuggestions. These properties enable flexible integration and enhanced usability for various use cases.

📄️ Date Picker

The Date picker component can be used to select a date or time or both date and time from the user.

📄️ Email

The Email component can be used to collect email addresses from users. It is a text field that validates the input against a regular expression pattern to ensure the input is a valid email address. It can be configured to be read-only, disabled, required, and can have a placeholder, helper text, and default value.

📄️ File Upload

The File Upload component allows users to select and upload one or multiple files. It supports file type restrictions, size limits, preview functionality, and comprehensive validation.

📄️ Hidden

The Hidden field component allows you to add fields to a form that are not visible to users but are included in the form submission. This is useful for storing metadata, default values, or any information that should be sent with the form data without user interaction or visibility.

📄️ Key-Value

The keyvalue component handles dynamic key-value pairs in a form, using Material-UI's accordion component for better organization and user experience.

📄️ Multi Select

The Multiselect (multiselect) component can be used, to select multiple values, using the Material-UI autocomplete component.

📄️ Multitext

A textbox that take multiple text input and renders the value as chip.

📄️ Number

The Number component can be used in any form to provide a numeric input field. It can be configured to be read-only, disabled, required, and can have a placeholder, helper text, and default value.

📄️ Object

The Object (object) component handles nested form structures, allowing users to add, modify, and manage items dynamically. This component supports nested objects and arrays, making it highly versatile for handling complex form data. It leverages Material-UI's components to provide a structured and organized user experience.

📄️ Password

The Password (password) component is a text box where characters inside the box are hidden from the user. It has similar properties to the Text component, including configuration options for being readonly, disabled, required, and supporting placeholder, helper text, and default value.

📄️ Phone Input

The Phone Input component can be used to capture and validate phone number from the user.

📄️ Radio Buttons

List of buttons that allows the user to select one option from a list of options.

📄️ Radio

The Radio component can be used in any form to provide a set of radio buttons.

📄️ Section

The Text component can be used in any form to provide a text field. It can be used for single-line text input fields.

📄️ Select

The select field is used to display a dropdown in the form.

📄️ Slider Component

The Slider component allows for the adjustment of a numerical value within a defined range using a graphical slider interface. It is built using Material-UI components and integrates seamlessly with forms managed by React Hook Form.

📄️ Text

The Text component can be used in any form to provide a text field for single-line inputs. It can be configured to be readonly, disabled, required, and can have a placeholder, helper text, and default value.

📄️ Text Area

The Textarea component can be used in any form to provide a multi-line text input field. It has similar properties to the Text component, including configuration options for being readonly, disabled, required, and supporting placeholder, helper text, and default value.

📄️ Toggle

The Toggle component is a customizable switch control designed to be used in forms.

📄️ URL

The Number component can be used in any form to provide a numeric input field. It can be configured to be readonly, disabled, required, and can have a placeholder, helper text, and default value.