# Popup Form ## Overview A popup form is a type of form that appears as a small overlay on top of the content triggered by a user action such as clicking a button.

### Properties

Name	Type	Description
`name`	`string`	Component name
`value`	`object`	Key value object
`valid`	`boolean`	Indicates if the component is valid
`validating`	`boolean`	Indicates if the component is validating

### Methods

Name	Parameters	Returns	Description
`open`	–	`void`	Open modal window
`close`	–	`void`	Close modal window
`setValue`	`data: object`	`void`	Set component data. Data is an object with arbitrary structure.
`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 component as invalid and display errors
`setOpenButtonDisabled`	`disabled:` `boolean`	`void`	Disable or enable the open button
`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 Click	Triggered when the component is clicked
On Double Click	Triggered when the component is double-clicked
On Change	Triggered when the component's state changes
On Custom Button Click	Triggered when the custom button is clicked
On Custom Button Double Click	Triggered when the custom button is double-clicked
On Open	Triggered when the component is opened
On Close	Triggered when the component is closed

## Working with the component You can cuztomize the component using its settings in the right side panel. From there, you can, for example: * *Hide the component* If necessary, you can hide the popup button to save space and open or close the form programmatically by selecting the **Hide button** checkbox.

* *Add a custom button to the form* By default, the component contains only a single *Submit* button. But you can also add a custom button to the form and customize it using the **Show custom button** setting.

{% hint style="info" %} The Popup Form also supports [CSS styling](https://docs.uibakery.io/how-tos/styling/modify-components-with-css). {% endhint %} * *Reset the form on close* By default, the component resets its content on submission but retains it if the form is closed. But, if required, you can modify this behaviour using the **Reset on close** setting.