Form

Use a Form component to capture data from end users

All components placed inside of a Form will create a parent/child relationship with the Form component. This enables the Form to easily manage the child components.

Form Buttons

By default, Form components have two Form Buttons included, Reset and Submit, which are similar to Button components, but with special properties to interact with the Form component's children. The two properties that differentiate Form Buttons from Button components are Disabled Invalid Forms and Reset Form on Success.

Submit Form Button

By default, a Submit Form Button will have Disabled Invalid Forms and Reset Form on Success enabled. This means, that the Submit button will be disabled until all required components in the Form are filled out. Similarly, when the Submit button is clicked, all child components will be reset to their default values.

Reset Form Button

A Reset Form Button interacts similarly to a Submit Form button, but the Disabled Invalid Forms is not toggled on by default, thus allowing users to reset all child components while filling out the form and start over.

Form Component Properties

Property	Description
Background Color	Changes the color of the background, takes in HTML color names, HEX, RBG, or RGBA values
Visible	Controls the visibility of the component, values are a boolean
Scroll Contents	Enable scrollability within the Form component

Form Reference Properties for Components and APIs

Properties can be accessed from other frontend components and backend APIs by adding the name of the Form component, and dot referencing the property. For a Form named Form1:

Property	Description
Form1.isVisible	Returns the boolean value of the button's visibility (True, if it is visible)
Form1.data	Returns an object of the current state of the form (see example below)

Form Button Properties

Property	Description
Label	Sets the label of the button
Button Style	Changes the style of the button, options are "Primary", "Secondary", or "Danger"
Disabled Invalid Forms	Disables the button when the parent form has a required component that is not filled, values are a boolean
Reset Form on Success	Resets the fields within the parent form when the click action succeeds, values are a boolean (see example here)
Loading Animation	Controls the loading state of the component, values are a boolean
Visible	Controls the visibility of the component, values are a boolean

Image showing the different button styles available:

Form Button Reference Properties for Components and APIs

Properties can be accessed from other frontend components and backend APIs by adding the name of the Form Button component, and dot referencing the property. For a Form Button named FormButton1:

Property	Description
FormButton1.isVisible	Returns the boolean value of the button's visibility (True, if it is visible)
FormButton1.isDisabled	Returns the boolean value of the button's disabled state (True, if it is disabled)
FormButton1.text	Returns the button's label as a string

Form Button Event Handler

Table Reference Property	Description
onClick	Triggers an action when the button is clicked