# Form
## Overview
The Form component is used to quickly update or add new records to your database.
### Properties
Name
Type
Description
name
string
Component name
value
value
Key-value object
valid
boolean
Indicates if the component is valid
validating
boolean
Indicates if the component is validating
### Methods
Name
Parameters
Returns
Description
setValue
data: object
void
Set component data
setSubmitButtonDisabled
disabled: boolean
void
Disable or enable the submit button
reset
–
void
Reset component to the initial value
validate
–
void
Trigger form validation
resetValidation
–
void
Clear validation errors
setErrors
errors: { [key: string]:
string } | null
void
Mark the form as invalid and display errors
submit
–
void
Trigger submit event
### Triggers
Name
Description
On Init
Triggered when the component is initialized
On Submit
Triggered when the component data is submitted
On Change
Triggered when the component's state changes
On Click
Triggered when the component is clicked
On Double Click
Triggered when the component is double-clicked
On Custom Button Click
Triggered when the custom button is clicked
On Custom Button Double Click
Triggered when the custom button is double-clicked
## Working with the component
### Best practices
Check out these articles to learn how you can utilize the Form component in different scenarios:point\_down:
{% content-ref url="../../concepts/components/work-with-components/linking-components" %}
[linking-components](https://docs.uibakery.io/concepts/components/work-with-components/linking-components)
{% endcontent-ref %}
{% content-ref url="../../build-from-scratch/getting-started/send-a-form" %}
[send-a-form](https://docs.uibakery.io/build-from-scratch/getting-started/send-a-form)
{% endcontent-ref %}
{% content-ref url="../../concepts/components/work-with-components/create-a-single-form-to-add-and-update-data" %}
[create-a-single-form-to-add-and-update-data](https://docs.uibakery.io/concepts/components/work-with-components/create-a-single-form-to-add-and-update-data)
{% endcontent-ref %}
### Form & field settings
#### View/Edit settings
In the *Edit settings* section, for any editable field you can specify the **Input mask** you need (for example, Uppercase/lowercase) and the **Field tooltip**. These settings will be applied to data display if the *Do not allow editing this field* checkbox is NOT selected.
{% hint style="warning" %}
*View settings* only work for fields with the **Do not allow editing this field** checkbox selected.
{% endhint %}
#### Fields validation
You can validate Form fields by clicking on the necessary field and navigating to the *Edit settings* section. There, you can set up the *Regexp pattern* and the error message, as well as set the min/max length for the field.
#### Setting default values for Form fields
It's possible to configure default values for any Form field. You can set them up in the component's **Data** property using the following format: `{field: 'default_value'}`, for example, `{text: 'Hi!'}`.
#### Changing an input value while editing
In some cases, it may be necessary to predefine the input value or change it depending on another field's value. To do so, you can use the **Value** property in the field's *Edit settings* section. It works similarly to the Input component's default *Value* field.
Let's review a couple of examples of using the Value field:
* Automatically populate the Initials field
Imagine you have a Form with some default data and the following fields: *Id*, *First name* and L*ast name*. Now, you also want to automatically display the initials of the user.
1. Add a new *Initials* field to the Form - select the *String* type.
2. Now, expand this field's *Edit settings* section and add the following code to the *Value* property:
`{{parent.value.first_name?.[0] || ''}}{{parent.value.last_name?.[0] || ''}}`;
That's it! Now, when you fill in the First and Last name fields, the value of the Initials field will be automatically updated depending on your input.
{% @arcade/embed flowId="vnJTbNMsBMCi02269S3s" url="" %}
* Change Select options depending on another field's value
Let's say you have a Form with the *Season* and *Month* fields and you want to display only the months corresponding to the specified season. Here's how you can configure this:
1. Create an action of the *JavaScript Code* type (`getAvailableOptions` here) and add the following code:
```js
return {
Winter: ['December', 'January', 'February'],
Spring: ['March', 'April', 'May'],
Summer: ['June', 'July', 'August'],
Autumn: ['September', 'October', 'November'],
};
```
2. Now, select the Form's **Month** field, change its type to *Select/Tag*, and add the following code to the **Options** property in the *General settings* section (in the JS mode):
```js
{{actions.getAvailableOptions.data?.[parent.value.season] ?? []}}
```
Done! Now specify the season in the Form and check the available options for the month.
{% @arcade/embed flowId="DeZBncNwUJQCCwvhKO3K" url="" %}
### Dynamic structure configuration
It's possible to use the JS mode for dynamic configuration of the Form's structure. To enable the mode, you just need to click the button next to component *Structure* in the right side panel.
You can specify Form structure using an array of objects and strings. If an object is used, it can define the following properties:
* *prop* - data property to display
* *type* - one of the available types: 'number', 'string', 'text', 'image', 'link', 'button', 'contextMenuButton', 'boolean', 'currency', 'date', 'datetime', 'file', 'jsoneditor', 'time', 'select', 'multiselect'.
* primaryKey, color, text, and others.
{% hint style="info" %}
Refer to [this article](https://docs.uibakery.io/reference/working-with-components/dynamic-structure-properties) for a full list of all supported properties.
{% endhint %}
This is an example of a dynamic structure configuration:
