# 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](/how-tos/styling/modify-components-with-css.md). {% 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.

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.uibakery.io/reference/working-with-components/pop-up-form.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.