# React Component Reference

The following React components are available:

* [#createforms](#createforms "mention")- Visual form builder interface for creating and editing forms
* [#formlist](#formlist "mention") - Display and manage a list of forms with filtering
* [#formviewer](#formviewer "mention") - Display a form for users to fill out and submit
* [#formviewer](#formviewer "mention") - Display a form with an existing submission for viewing or editing
* [#submissionlist](#submissionlist "mention") - Display a table of submissions for a form
* [#submissionviewer](#submissionviewer "mention") - View, edit, or delete a submission
* [#formdelete](#formdelete "mention")- Confirmation dialog for deleting a form
* [#deletesubmission](#deletesubmission "mention") - Confirmation dialog for deleting a submission
* [#formsettings](#formsettings "mention")- Edit form metadata (title, name, path, tags)

## CreateForms

 A comprehensive form builder component that provides a visual interface for creating and editing forms using the Form.io builder.

### Summary <a href="#summary" id="summary"></a>

The `CreateForms` component renders a full-featured form builder with a toolbar for managing form metadata (title, path, display type) and a visual drag-and-drop interface for building forms. It handles form loading, saving, and change tracking automatically.

### Props <a href="#props" id="props"></a>

| Prop                | Type                       | Required | Description                                                 |
| ------------------- | -------------------------- | -------- | ----------------------------------------------------------- |
| `formId`            | `string`                   | No       | ID of the form to edit. If not provided, creates a new form |
| `onChange`          | `(form: FormType) => void` | No       | Callback fired when form structure changes                  |
| `onEditComponent`   | `(component: any) => void` | No       | Callback fired when a component is edited                   |
| `onDeleteComponent` | `(component: any) => void` | No       | Callback fired when a component is deleted                  |
| `onSaveComponent`   | `(component: any) => void` | No       | Callback fired when a component is saved                    |
| `onSaveForm`        | `(form: FormType) => void` | No       | Callback fired when the form is successfully saved          |
| `onUpdateComponent` | `(component: any) => void` | No       | Callback fired when a component is updated                  |
| `onError`           | `(error: Error) => void`   | No       | Callback fired when an error occurs                         |
| `onAddComponent`    | `(component: any) => void` | No       | Callback fired when a component is added                    |
| `Loading`           | `ReactNode`                | No       | Custom loading component to display while loading           |

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { CreateForms } from '@formio/enterprise-form-builder-react';

function FormBuilderPage({ formId }: { formId?: string }) {
  const handleSave = (form) => {
    console.log('Form saved:', form);
    // Navigate to form list or show success message
  };

  const handleError = (error) => {
    console.error('Error:', error);
    // Show error notification
  };

  return (
    <CreateForms
      formId={formId}
      onSaveForm={handleSave}
      onError={handleError}
      Loading={<div>Loading form builder...</div>}
    />
  );
}
```

### Related Hooks <a href="#related-hooks" id="related-hooks"></a>

* [#useloadforms](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#useloadforms "mention") - Load form data
* [#usesaveform](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usesaveform "mention") - Save form data
* [#usesaveform](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usesaveform "mention")- Load project configuration

## FormList

A component that displays a list of forms with filtering, search, and action capabilities.

### Summary <a href="#summary" id="summary"></a>

The `FormList` component renders a grid of forms with search and tag filtering capabilities. It provides actions for viewing, editing, viewing submissions, and deleting forms. The component handles form loading and pagination automatically.

### Props <a href="#props" id="props"></a>

| Prop               | Type                            | Required | Description                                              |
| ------------------ | ------------------------------- | -------- | -------------------------------------------------------- |
| `onView`           | `() => void`                    | Yes      | Callback fired when a form is clicked to view            |
| `onEdit`           | `() => void`                    | Yes      | Callback fired when edit action is triggered             |
| `onViewSubmission` | `() => void`                    | Yes      | Callback fired when view submissions action is triggered |
| `onError`          | `(error: Error) => void`        | No       | Callback fired when an error occurs                      |
| `onDelete`         | `() => void`                    | No       | Callback fired after successful form deletion            |
| `components`       | `FormGridProps['components']`   | No       | Custom components for rendering form grid items          |
| `deleteComponents` | `FormDeleteProps['components']` | No       | Custom components for delete confirmation dialog         |
| `limit`            | `number`                        | No       | Maximum number of forms to load per page (default: 10)   |

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { FormList } from '@formio/enterprise-form-builder-react';
import { useNavigate } from 'react-router-dom';

function FormsPage() {
  const navigate = useNavigate();

  return (
    <FormList
      onView={(formId) => navigate(`/forms/${formId}`)}
      onEdit={(formId) => navigate(`/forms/${formId}/edit`)}
      onViewSubmission={(formId) => navigate(`/forms/${formId}/submissions`)}
      onDelete={() => {
        console.log('Form deleted');
        // Refresh list or show notification
      }}
      onError={(error) => console.error('Error:', error)}
    />
  );
}
```

### Related Hooks <a href="#related-hooks" id="related-hooks"></a>

* [#useloadforms](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#useloadforms "mention")- Load forms list
* [#usedeleteform](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usedeleteform "mention")- Delete forms
* [#formdelete](#formdelete "mention")- Delete confirmation component

## FormViewer

A component that displays a form for users to fill out and submit.

### Summary <a href="#summary" id="summary"></a>

The `FormViewer` component loads and renders a form by ID, allowing users to fill it out and submit it. It handles form loading, submission, and error states automatically.

### Props <a href="#props" id="props"></a>

| Prop            | Type                                              | Required | Description                                                          |
| --------------- | ------------------------------------------------- | -------- | -------------------------------------------------------------------- |
| `formId`        | `string`                                          | Yes      | ID of the form to display                                            |
| `onSubmit`      | `(submission: FormioSubmission) => Promise<void>` | No       | Callback fired when form is submitted                                |
| `onError`       | `(error: Error) => void`                          | No       | Callback fired when an error occurs                                  |
| `submitting`    | `boolean`                                         | No       | Whether the form is currently being submitted                        |
| `showInfoAlert` | `boolean`                                         | No       | Whether to show an info alert above the form (default: `true`)       |
| `className`     | `string`                                          | No       | Additional CSS classes to apply                                      |
| `options`       | `object`                                          | No       | Options to pass to the Form component (e.g., `noAlerts`, `readOnly`) |

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { FormViewer } from '@formio/enterprise-form-builder-react';
import { useState } from 'react';

function FormFillPage({ formId }: { formId: string }) {
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async (submission) => {
    setSubmitting(true);
    try {
      // Save submission or send to API
      console.log('Submission:', submission);
      // Navigate to success page
    } catch (error) {
      console.error('Error submitting:', error);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <FormViewer
      formId={formId}
      onSubmit={handleSubmit}
      submitting={submitting}
      options={{ noAlerts: true }}
    />
  );
}
```

### Related Hooks <a href="#related-hooks" id="related-hooks"></a>

* [#useloadform](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#useloadform "mention")- Load form data
* [#usesavesubmission](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usesavesubmission "mention")- Save form submission

## UseForm

A component that displays a form with an existing submission for viewing or editing.

### Summary <a href="#summary" id="summary"></a>

The `UseForm` component loads both a form and a submission, then renders the form with the submission data pre-filled. It supports both view and edit modes.

### Props <a href="#props" id="props"></a>

| Prop             | Type                                        | Required | Description                                                                                   |
| ---------------- | ------------------------------------------- | -------- | --------------------------------------------------------------------------------------------- |
| `formId`         | `string`                                    | Yes      | ID of the form to display                                                                     |
| `submissionId`   | `string`                                    | Yes      | ID of the submission to load                                                                  |
| `submissionMode` | `'view' \| 'edit'`                          | No       | Mode for the form - 'view' renders read-only, 'edit' allows modifications (default: `'view'`) |
| `onSubmit`       | `(submission: Submission) => Promise<void>` | Yes      | Callback fired when form is submitted (in edit mode)                                          |
| `onError`        | `(error: Error) => void`                    | No       | Callback fired when an error occurs                                                           |

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { UseForm } from '@formio/enterprise-form-builder-react';

function EditSubmissionPage({ 
  formId, 
  submissionId 
}: { 
  formId: string; 
  submissionId: string;
}) {
  const handleSubmit = async (submission) => {
    console.log('Submission updated:', submission);
    // Navigate back or show success message
  };

  return (
    <UseForm
      formId={formId}
      submissionId={submissionId}
      submissionMode="edit"
      onSubmit={handleSubmit}
      onError={(error) => console.error('Error:', error)}
    />
  );
}
```

### Related Hooks <a href="#related-hooks" id="related-hooks"></a>

* [#useloadform](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#useloadform "mention")- Load form data
* [#useloadsubmission](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#useloadsubmission "mention")- Load submission data
* [#usesavesubmission](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usesavesubmission "mention") - Save submission data

## SubmissionList

A component that displays a table of submissions for a specific form.

### Summary <a href="#summary" id="summary"></a>

The `SubmissionList` component renders a paginated table showing all submissions for a given form. It provides click handlers for viewing individual submissions and supports custom table components.

### Props <a href="#props" id="props"></a>

| Prop                | Type                             | Required | Description                                                                                          |
| ------------------- | -------------------------------- | -------- | ---------------------------------------------------------------------------------------------------- |
| `formId`            | `string`                         | Yes      | ID of the form whose submissions to display                                                          |
| `limit`             | `number`                         | No       | Number of submissions per page (default: `10`)                                                       |
| `onSubmissionClick` | `(submissionId: string) => void` | No       | Callback fired when a submission row is clicked                                                      |
| `className`         | `string`                         | No       | Additional CSS classes to apply                                                                      |
| `tableComponents`   | `object`                         | No       | Custom components for rendering table elements (Container, TableContainer, TableHeadContainer, etc.) |

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { SubmissionList } from '@formio/enterprise-form-builder-react';
import { useNavigate } from 'react-router-dom';

function SubmissionsPage({ formId }: { formId: string }) {
  const navigate = useNavigate();

  return (
    <SubmissionList
      formId={formId}
      limit={20}
      onSubmissionClick={(submissionId) => {
        navigate(`/forms/${formId}/submissions/${submissionId}`);
      }}
    />
  );
}
```

### Related Components <a href="#related-components" id="related-components"></a>

* [`SubmissionViewer`](https://file+.vscode-resource.vscode-cdn.net/Users/mslavin/FormioCodebase/nirvana/packages/enterprise-form-builder-react/docs/components/SubmissionViewer.md) - View individual submissions

## SubmissionViewer

A component that displays a submission with options to view, edit, or delete it.

### Summary <a href="#summary" id="summary"></a>

The `SubmissionViewer` component loads and displays a submission with a header containing action buttons. It supports viewing, editing, and deleting submissions, with different modes for each operation.

### Props <a href="#props" id="props"></a>

| Prop           | Type                                              | Required | Description                                                      |
| -------------- | ------------------------------------------------- | -------- | ---------------------------------------------------------------- |
| `formId`       | `string`                                          | Yes      | ID of the form the submission belongs to                         |
| `submissionId` | `string`                                          | Yes      | ID of the submission to display                                  |
| `onSave`       | `(submission: FormioSubmission) => Promise<void>` | No       | Callback fired when submission is saved (in edit mode)           |
| `onCancel`     | `() => void`                                      | No       | Callback fired when cancel action is triggered                   |
| `onBack`       | `() => void`                                      | No       | Callback fired when back button is clicked                       |
| `onError`      | `(error: Error) => void`                          | No       | Callback fired when an error occurs                              |
| `className`    | `string`                                          | No       | Additional CSS classes to apply                                  |
| `showHeader`   | `boolean`                                         | No       | Whether to show the header with action buttons (default: `true`) |
| `formTitle`    | `string`                                          | No       | Title of the form to display in the header                       |

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { SubmissionViewer } from '@formio/enterprise-form-builder-react';
import { useNavigate } from 'react-router-dom';

function ViewSubmissionPage({ 
  formId, 
  submissionId 
}: { 
  formId: string; 
  submissionId: string;
}) {
  const navigate = useNavigate();

  const handleSave = async (submission) => {
    console.log('Submission saved:', submission);
    navigate(`/forms/${formId}/submissions`);
  };

  const handleBack = () => {
    navigate(`/forms/${formId}/submissions`);
  };

  return (
    <SubmissionViewer
      formId={formId}
      submissionId={submissionId}
      onSave={handleSave}
      onBack={handleBack}
      onError={(error) => console.error('Error:', error)}
      formTitle="My Form"
    />
  );
}
```

### Related Hooks <a href="#related-hooks" id="related-hooks"></a>

* [#useloadsubmission](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#useloadsubmission "mention")- Load submission data
* [#usesavesubmission](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usesavesubmission "mention")- Save submission data
* [#usedeletesubmission](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usedeletesubmission "mention")- Delete submission component

## FormDelete

A component that provides a confirmation dialog for deleting a form.

### Summary <a href="#summary" id="summary"></a>

The `FormDelete` component renders a confirmation dialog with customizable components for the message and action buttons. It handles the deletion process and provides callbacks for success and cancellation.

### Props <a href="#props" id="props"></a>

| Prop              | Type                         | Required | Description                                             |
| ----------------- | ---------------------------- | -------- | ------------------------------------------------------- |
| `form`            | `FormType & { _id: string }` | Yes      | The form object to delete (must include `_id`)          |
| `onDeleteSuccess` | `() => void`                 | No       | Callback fired when deletion is successful              |
| `onCancel`        | `() => void`                 | No       | Callback fired when deletion is cancelled               |
| `components`      | `object`                     | No       | Custom components for rendering the confirmation dialog |

### Custom Components <a href="#custom-components" id="custom-components"></a>

The `components` prop accepts an object with optional custom components:

* `ConfirmationDialog`: Container component for the dialog
* `ConfirmationMessage`: Component that displays the confirmation message
* `ConfirmationButtons`: Component that renders the action buttons

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { FormDelete } from '@formio/enterprise-form-builder-react';

function DeleteFormModal({ form, onClose, onDeleted }) {
  return (
    <div className="modal show">
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-body">
            <FormDelete
              form={form}
              onDeleteSuccess={() => {
                onDeleted();
                onClose();
              }}
              onCancel={onClose}
            />
          </div>
        </div>
      </div>
    </div>
  );
}
```

### Related Hooks <a href="#related-hooks" id="related-hooks"></a>

* [#usedeleteform](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usedeleteform "mention")- Delete form functionality

## DeleteSubmission

A component that provides a confirmation dialog for deleting a submission.

### Summary <a href="#summary" id="summary"></a>

The `DeleteSubmission` component renders a simple confirmation dialog for deleting a submission. It handles the deletion process and provides callbacks for success, cancellation, and errors.

### Props <a href="#props" id="props"></a>

| Prop           | Type                      | Required | Description                                                                                          |
| -------------- | ------------------------- | -------- | ---------------------------------------------------------------------------------------------------- |
| `formId`       | `string`                  | Yes      | ID of the form the submission belongs to                                                             |
| `submissionId` | `string`                  | Yes      | ID of the submission to delete                                                                       |
| `onCancel`     | `() => void`              | No       | Callback fired when deletion is cancelled                                                            |
| `onDeleted`    | `() => void`              | No       | Callback fired when deletion is successful                                                           |
| `onError`      | `(error: string) => void` | No       | Callback fired when an error occurs                                                                  |
| `title`        | `string`                  | No       | Custom title for the confirmation dialog (default: `'Are you sure you wish to delete this record?'`) |

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { DeleteSubmission } from '@formio/enterprise-form-builder-react';

function DeleteSubmissionModal({ 
  formId, 
  submissionId, 
  onClose, 
  onDeleted 
}) {
  return (
    <div className="modal show">
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-body">
            <DeleteSubmission
              formId={formId}
              submissionId={submissionId}
              onDeleted={() => {
                onDeleted();
                onClose();
              }}
              onCancel={onClose}
              onError={(error) => console.error('Delete error:', error)}
            />
          </div>
        </div>
      </div>
    </div>
  );
}
```

### Related Hooks <a href="#related-hooks" id="related-hooks"></a>

* [#usedeletesubmission](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usedeletesubmission "mention") - Delete submission functionality

## FormSettings

A component that provides a form for editing form metadata (title, name, path, tags) and includes a delete form option.

### Summary <a href="#summary" id="summary"></a>

The `FormSettings` component renders a form for editing form settings and includes a "Danger Zone" section with a delete form button. It handles loading, saving, and error states automatically.

### Props <a href="#props" id="props"></a>

| Prop                 | Type                       | Required | Description                                         |
| -------------------- | -------------------------- | -------- | --------------------------------------------------- |
| `formId`             | `string`                   | No       | ID of the form to edit settings for                 |
| `Loading`            | `ReactNode`                | No       | Custom loading component to display while loading   |
| `onSaveSettingsForm` | `(form: FormType) => void` | No       | Callback fired when settings are successfully saved |
| `onError`            | `(error: Error) => void`   | No       | Callback fired when an error occurs                 |
| `onFormDelete`       | `() => void`               | No       | Callback fired when form is successfully deleted    |

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { FormSettings } from '@formio/enterprise-form-builder-react';

function SettingsPage({ formId }: { formId: string }) {
  const handleSave = (form) => {
    console.log('Settings saved:', form);
    // Show success notification
  };

  const handleDelete = () => {
    console.log('Form deleted');
    // Navigate to form list
  };

  return (
    <FormSettings
      formId={formId}
      onSaveSettingsForm={handleSave}
      onFormDelete={handleDelete}
      onError={(error) => console.error('Error:', error)}
    />
  );
}
```

### Related Hooks <a href="#related-hooks" id="related-hooks"></a>

* [#useloadform](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#useloadform "mention")- Load form data
* [#usedeleteform](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usedeleteform "mention") - Save form settings
* [#formdelete](#formdelete "mention") - Delete form component


---

# 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://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-applications/react-component-reference.md?ask=<question>
```

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.