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 |