# DynamicForm

This component provides a dynamic form component Developer can pass a json structure and it will create a form component

## Installation

```tsx
import { DynamicForm } from 'uxp/components';
```

## Signature

```tsx
const DynamicForm: React.ForwardRefExoticComponent<React.RefAttributes<DynamicFormHandlers> & DynamicFormProps>
```

## Properties

| Name                     | Type                                                                                                                                                                                                                                                                                                                                                                                                                                         | Mandatory | Default Value | Example Value |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------- | ------------- |
| formStructure            | [FormSectionProps\[\]](https://help.iviva.com/uxp/v5/additional-resources/types/formsectionprops)                                                                                                                                                                                                                                                                                                                                            | Yes       | -             | -             |
| beforeSubmit             | (data: IFormData) => Promise                                                                                                                                                                                                                                                                                                                                                                                                                 | No        | -             | -             |
| onSubmit                 | (data: IFormData) => Promise                                                                                                                                                                                                                                                                                                                                                                                                                 | Yes       | -             | -             |
| onCancel                 | () => void                                                                                                                                                                                                                                                                                                                                                                                                                                   | No        | -             | -             |
| submitButtonLabel        | string                                                                                                                                                                                                                                                                                                                                                                                                                                       | No        | -             | -             |
| submitButtonLoadingLabel | string                                                                                                                                                                                                                                                                                                                                                                                                                                       | No        | -             | -             |
| submitButtonIcon         | string                                                                                                                                                                                                                                                                                                                                                                                                                                       | No        | -             | -             |
| cancelButtonLabel        | string                                                                                                                                                                                                                                                                                                                                                                                                                                       | No        | -             | -             |
| cancelButtonIcon         | string                                                                                                                                                                                                                                                                                                                                                                                                                                       | No        | -             | -             |
| hideCancelButton         | boolean                                                                                                                                                                                                                                                                                                                                                                                                                                      | No        | -             | -             |
| hideButtons              | boolean                                                                                                                                                                                                                                                                                                                                                                                                                                      | No        | -             | -             |
| isLoading                | boolean                                                                                                                                                                                                                                                                                                                                                                                                                                      | No        | -             | -             |
| formContainerStyles      | React.CSSProperties                                                                                                                                                                                                                                                                                                                                                                                                                          | No        | -             | -             |
| renderOptions            | { renderStyle: 'standard' \| 'tabs' \| 'wizard', direction?: 'vertical' \| 'horizontal' // only applicable to tabs and wizard tabBackgroundColor?: string, tabTextColor?: string, activeTabBackgroundColor?: string, activeTabTextColor?: string, errorTabBackgroundColor?: string, errorTabTextColor?: string, disabledTabBackgroundColor?: string, disabledTabTextColor?: string, previousButtonLabel?: string, nextButtonLabel?: string } | No        | -             | -             |

## Ref Handlers

Available methods through ref:

| Method          | Type                                      | Description |
| --------------- | ----------------------------------------- | ----------- |
| submit          | () => Promise                             | -           |
| cancel          | () => void                                | -           |
| validate        | () => Promise                             | -           |
| getFormData     | () => IFormData                           | -           |
| setFormData     | (data: IFormData) => void                 | -           |
| getErrors       | () => Record\<string, string>             | -           |
| clearErrors     | () => void                                | -           |
| setErrors       | (errors: Record\<string, string>) => void | -           |
| clearFieldError | (fieldName: string \| string\[]) => void  | -           |
| isProcessing    | () => boolean                             | -           |
| goToNext        | () => void                                | -           |
| goToPrevious    | () => void                                | -           |

## Related Types

* [DynamicFormProps](https://help.iviva.com/uxp/v5/additional-resources/types/dynamicformprops)
* [FormSectionProps](https://help.iviva.com/uxp/v5/additional-resources/types/formsectionprops)
* [DynamicFormFieldProps](https://help.iviva.com/uxp/v5/additional-resources/types/dynamicformfieldprops)
* [FormValue](https://help.iviva.com/uxp/v5/additional-resources/types/formvalue)
* [IFormData](https://help.iviva.com/uxp/v5/additional-resources/types/iformdata)
* [CustomValidateResponse](https://help.iviva.com/uxp/v5/additional-resources/types/customvalidateresponse)
* [DynamicFormHandlers](https://help.iviva.com/uxp/v5/additional-resources/types/dynamicformhandlers)