Form

The form component is a container for input elements and provides built-in validation, error handling, and submission actions.

Usage

Within the Form component, you can include a range of elements to capture user input. The available elements include:

Form Element	Purpose
Input Field	Collects single-line data such as names or email addresses.
Textarea Field	Captures multi-line input, such as messages or descriptions.
Select Field	Displays a dropdown list for single or multiple selections.
Checkbox/Checkboxes Field	Allows users to select one or multiple options.
ToggleGroup Field	Provides a set of toggle options for single or multiple selections.
RadioGroup Field	Lets users select only one option from a set.
FormSubmit	Submits the form data (typically used as the Submit button).
FormReset	Resets the form fields to their initial values.

Adding a Form

To add a Form to your page:

Open the Insert Menu and navigate to Components.

Drag and drop the Form component onto your page.

Build your form by inserting and removing form elements (like Input Fields, Textareas, Checkbox Fields, etc.) as needed.

Guides

Validation

Validation happens by default to make sure the information entered is correct. For more advanced checks, you can add a custom schema using zodSchema.

To add custom validation:

Select the Form component.

In the Properties Panel, set the zodSchema property with your custom action (this may involve writing a small function).

Submitting the Form

You can define what happens when the form is submitted (for example, triggering API calls, updating state, or navigating to another page). This is done using the onSubmit property.

To configure form submission behavior:

Ensure your form includes a FormSubmit component.

Select the Form component and open the Properties Panel.

Set the onSubmit property to trigger your desired actions (such as API calls or navigation).

Reset Button

A reset button allows users to clear all inputs in the form.

To add a reset button:

Open the Insert Menu and navigate to Form Components.

Add the FormReset component to your form.

Adjust its style and positioning using the Properties Panel.

Custom Error Messages

Each form field can display custom error messages for different validation scenarios (e.g., required fields, maximum length).

To customize error messages:

Select a form field component (such as an Input Field).

In the Properties Panel, edit the appropriate error message properties (e.g., requiredMessage, customValidationMessage, maxLengthMessage, etc.)

Action?

The action property is the default HTML action attribute. It specifies the URL where the form data should be sent when the form is submitted. To set this, select the Form component and enter the target URL in the Action field within the Properties Panel.

Method?

The method property determines how form data is sent. You can choose between:

GET – Appends form data to the URL.

POST – Sends data in the request body.

To set the method:

Select the Form component.

Go to the Properties Panel.

Choose your desired method (GET or POST) from the method property.

Redirect Site Visitors on Form Submission?

You can automatically redirect users after the form is submitted by setting the redirect property.

To configure redirection:

Select the Form component.

In the Properties Panel, set the redirect property with the target URL.

Properties

Form

Property	Type	Default	Description
defaultValues	`Object`	-	An object that defines the initial values for the form fields.
debounced	`boolean`	`false`	If enabled, input validation is debounced to reduce frequent updates.
debounceTime	`number`	`100`	The debounce delay in milliseconds.
onSubmit	`Action`	-	The action that is triggered when the form is submitted.
zodSchema	`Helper`	-	A Zod schema for advanced validation of form data.