const domNode = document.getElementById('root');
const root = createRoot(domNode);
const root = createRoot();
root.render(


,
);
`

Components

$3

A React context provider component that is required when using some hooks and components from this library.

#### Props

| Name | Type | Description |
| ---------- | ------ | ---------------------------------------- |
| Formio | object | The Formio object to be used. |
| baseUrl | string | The base url of a Form.io server. |
| projectUrl | string | The url of a Form.io enterprise project. |

#### Examples

Render a simple form from your self hosted Form.io deployment:

`JSX
import { createRoot } from 'react-dom/client';
import { Form, FormioProvider } from '@formio/react';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

root.render(



);
`

Extend the Formio object to use external modules:

`JSX
import { createRoot } from 'react-dom/client';
import { Form, FormioProvider } from '@formio/react';
import { Formio } from '@formio/js';
import premium from '@formio/premium';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

Formio.use(premium);
root.render(



);
`

$3

A React component wrapper around a Form.io form. Able to take a JSON form definition or a Form.io form URL and render the form in your React application.

#### Props

| Name | Type | Default | Description |
| ------------------- | --------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| src | Webform \| string | | The JSON form definition or the source URL. If a URL, commonly from a form.io server. |
| url | string | | The url of the form definition. Used in conjunction with a JSON form definition passed to src, this is used for file upload, OAuth, and other components or actions that need to know the URL of the Form.io form for further processing. The form will not be loaded from this url and the submission will not be saved here either. |
| submission | JSON | | Submission data to fill the form. You can either load a previous submission or create a submission with some pre-filled data. If you do not provide a submissions the form will initialize an empty submission using default values from the form. |
| options | FormOptions | | The form options. See here for more details. |
| onFormReady | (instance: Webform) => void | | A callback function that gets called when the form has rendered. It is useful for accessing the underlying @formio/js Webform instance. |
| onSubmit | (submission: JSON, saved?: boolean) => void | | A callback function that gets called when the submission has started. If src is not a Form.io server URL, this will be the final submit event. |
| onCancelSubmit | () => void | | A callback function that gets called when the submission has been canceled. |
| onSubmitDone | (submission: JSON) => void | | A callback function that gets called when the submission has successfully been made to the server. This will only fire if src is set to a Form.io server URL. |
| onChange | (value: any, flags: any, modified: any) => void | | A callback function that gets called when a value in the submission has changed. |
| onComponentChange | (changed: { instance: Webform; component: Component; value: any; flags: any}) => void | | A callback function that gets called when a specific component changes. |
| onError | (error: EventError \| false) => void | | A callback function that gets called when an error occurs during submission (e.g. a validation error). |
| onRender | (param: any) => void | | A callback function that gets called when the form is finished rendering. param will depend on the form and display type. |
| onCustomEvent | (event: { type: string; component: Component; data: JSON; event?: Event; }) => void | | A callback function that is triggered from a button component configured with "Event" type. |
| onPrevPage | (page: number, submission: JSON) => void | | A callback function for Wizard forms that gets called when the "Previous" button is pressed. |
| onNextPage | (page: number, submission: JSON) => void | | A callback function for Wizard forms that gets called when the "Next" button is pressed. |
| otherEvents | [event: string]: (...args: any[]) => void; | | A "catch-all" prop for subscribing to other events (for a complete list, see our documentation). |

#### Examples

Render a simple form from the Form.io SaaS:

`JSX
import { createRoot } from 'react-dom/client';
import { Form } from '@formio/react';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

root.render(
,
);
`

Render a simple form from a JSON form definition:

`JSX
import { createRoot } from 'react-dom/client';
import { Form } from '@formio/react';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

const formDefinition = {
type: "form",
display: "form",
components: [
{
type: "textfield"
key: "firstName",
label: "First Name",
input: true,
},
{
type: "textfield"
key: "firstName",
label: "First Name",
input: true,
},
{
type: "button",
key: "submit",
label: "Submit",
input: true
}
]
}

root.render();
`

Access the underlying form instance (see here for details):

`JSX
import { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { Form } from '@formio/react';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

const formDefinition = {
type: "form",
display: "form",
components: [
{
type: "textfield"
key: "firstName",
label: "First Name",
input: true,
},
{
type: "textfield"
key: "firstName",
label: "First Name",
input: true,
},
{
type: "button",
key: "submit",
label: "Submit",
input: true
}
]
}

const App = () => {
const formInstance = useRef(null);

const handleFormReady = (instance) => {
formInstance.current = instance;
}

const handleClick = () => {
if (!formInstance.current) {
console.log("Our form isn't quite ready yet.");
return;
}
formInstance.current.getComponent('firstName')?.setValue('John');
formInstance.current.getComponent('lastName')?.setValue('Smith');
}

return (


root.render();
`

#### Usage in Next.js

A number of dependencies in the @formio/js rely on web APIs and browser-specific globals like window. Because Next.js includes a server-side rendering stage, this makes it difficult to import the Form component directly, even when used in client components. For this reason, we recommend dynamically importing the Form component using Next.js' dynamic API:

`tsx
'use client';
import dynamic from 'next/dynamic';
import { Webform } from '@formio/js';

const Form = dynamic(
() => import('@formio/react').then((module) => module.Form),
{ ssr: false },
);

export default function Home() {
const formInstance = useRef(null);

const handleClick = () => {
if (!formInstance.current) {
console.log("Our form isn't quite ready yet.");
return;
}
formInstance.current.getComponent('firstName')?.setValue('John');
formInstance.current.getComponent('lastName')?.setValue('Smith');
};

return (


| Name | Type | Default | Description |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| initialForm | FormType | | The JSON form definition of the initial form to be rendered in the builder. Oftentimes, this must be a stable reference; otherwise it may destroy and recreate the underlying builder instance and cause unexpected behavior. |
| options | FormBuilderOptions | | The form builder options. See here for more details. |
| onBuilderReady | (instance: FormBuilder) => void | | A callback function that gets called when the form builder has rendered. It is useful for accessing the underlying @formio/js FormBuilder instance. |
| onChange | (form: FormType) => void | | A callback function that gets called when the form being built has changed. |
| onSaveComponent | (component: Component, original: Component, parent: Component, path: string, index: number, isNew: boolean, originalComponentSchema: Component) => void; | | A callback function that gets called when a component is saved in the builder. |
| onEditComponent | (component: Component) => void | | A callback function that gets called when a component is edited. |
| onUpdateComponent | (component: Component) => void | | A callback function that is called when a component is updated. |
| onDeleteComponent | (component: Component, parent: Component, path: string, index: number) => void | | A callback function that is called when a component is deleted. |

#### Examples

Render a simple form builder with a blank form:

`JSX
import { createRoot } from 'react-dom/client';
import { FormBuilder } from '@formio/react';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

root.render(
,
);
`

Render a builder with an initial form definition:

`JSX
import { createRoot } from 'react-dom/client';
import { FormBuilder } from '@formio/react';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

const formDefinition = {
display: "form",
components: [
{
type: "textfield"
key: "firstName",
label: "First Name",
input: true,
},
{
type: "textfield"
key: "firstName",
label: "First Name",
input: true,
},
{
type: "button",
key: "submit",
label: "Submit",
input: true
}
]
}

root.render();
`

Access the underlying form builder instance (see here for details):

`JSX
import { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { FormBuilder } from '@formio/react';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

const formDefinition = {
display: "form",
components: [
{
type: "textfield"
key: "firstName",
label: "First Name",
input: true,
},
{
type: "textfield"
key: "firstName",
label: "First Name",
input: true,
},
{
type: "button",
key: "submit",
label: "Submit",
input: true
}
]
}

const App = () => {
const formBuilderInstance = useRef(null);

const handleFormReady = (instance) => {
formBuilderInstance.current = instance;
}

const handleClick = () => {
if (!formBuilderInstance.current) {
console.log("Our form isn't quite ready yet.");
return;
}
console.log("Here's our builder instance:", formBuilderInstance.current);
}

return (


root.render();
`

$3

The FormEdit component wraps the FormBuilder component and adds a settings form, enabling direct interaction with forms to and from a Form.io server. The FormEdit component must be a child of a component.

#### Props

| Name | Type | Default | Description |
| --------------------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| initialForm | FormType | { title: '', name: '', path: '', display: 'form' as const, type: 'form' as const, components: [] } | The form definition of the existing form that is to be modified. |
| settingsForm | FormType | DEFAULT_SETTINGS_FORM | The form definition for the "settings" form, which defaults to a form that defines the title, name, path, tags, and display of the form being edited. |
| settingsFormOptions | FormOptions | {} | The options passed to the settings form. |
| onSettingsFormReady | (instance: Webform) => void | | The onFormReady callback for the settings form. |
| onBuilderReady | (instance: FormioBuilder) => void | | The onBuilderReady callback for the form builder. |
| builderOptions | FormBuilderOptions | {} | The options to be passed to FormBuilder. |
| saveFormFn | (form: FormType) => Promise | | Defaults to using the Form.io SDK to save the form to a Form.io server configured by . |
| onSaveForm | (form: FormType) => void | | The callback that is called after saveFormFn is called (either the prop or the default). An optional function that replaces the default behavior of saving the form to a Form.io server. |

#### Styling

FormEdit takes a components prop that contains each "element" of the FormEdit component, allowing you to inject your own markup and styling. Here is its type:

`ts
type ComponentProp = (props: T) => JSX.Element;
type Components = {
Container?: ComponentProp<{ children: ReactNode }>;
SettingsFormContainer?: ComponentProp<{ children: ReactNode }>;
BuilderContainer?: ComponentProp<{ children: ReactNode }>;
SaveButtonContainer?: ComponentProp<{ children: ReactNode }>;
SaveButton?: ComponentProp<{
onClick: () => void;
}>;
};
`

#### Examples

Load a simple FormEdit component that loads a form from a Form.io server:

`tsx
import { createRoot } from 'react-dom/client';
import { useState, useEffect } from 'react';
import {
FormGrid,
FormioProvider,
useFormioContext,
FormType,
} from '@formio/react';

const App = () => {
const { Formio, projectUrl } = useFormioContext();
const [form, setForm] = useState();

useEffect(() => {
const fetchForm = async () => {
try {
const formio = new Formio(${projectUrl}/example);
const form = await formio.loadForm();
setForm(form);
} catch (err) {
console.log('Error while fetching form:', err);
}
};
}, [Formio, projectUrl]);

return form ? (
initialForm={form}
onSaveForm={() => console.log('Form saved to my Form.io server!')}
/>
) : null;
};
const domNode = document.getElementById('root');
const root = createRoot(domNode);

root.render(


,
);
`

Inject your own markup and styling into constituent components:

`tsx
import { createRoot } from 'react-dom/client';
import { useState, useEffect } from 'react';
import {
FormEdit,
FormioProvider,
useFormioContext,
FormType,
} from '@formio/react';

const App = ({ name }: { name: string }) => {
const { Formio, projectUrl } = useFormioContext();
const [form, setForm] = useState();

useEffect(() => {
const fetchForm = async () => {
try {
const formio = new Formio(${projectUrl}/example);
const form = await formio.loadForm();
setForm(form);
} catch (err) {
console.log('Error while fetching form:', err);
}
};
}, [Formio, projectUrl]);

return form ? (
initialForm={form}
onSaveForm={() => console.log('Form saved to my Form.io server!')}
components={{
SaveButtonContainer: ({ children }) => (
className="save-form-bar button-wrap"
style={{ justifyContent: 'end' }}
>
{children}