# FormProvider

## Overview

`FormProvider` is a component that allows you to define the wizard fields that you want to use in your react application. It provides a way to specify the field components that will be used to render the wizard fields, and allows you to use either the default field components provided by the `@tutim/fields` library, or your own custom field components.

## Installation

To use `FormProvider`, you will need to install the `@tutim/headless` library in your react project. You can do this using npm or yarn:

```bash
npm install @tutim/headless
```

```bash
yarn add @tutim/headless
```

You will also need to install the `@tutim/fields` library if you want to use the default field components provided by the library. You can do this using npm or yarn:

```bash
npm install @tutim/fields
```

```bash
yarn add @tutim/fields
```

## Basic example

To use `FormProvider`, you will need to wrap your react application with the `FormProvider` component and specify the field components that you want to use. You can do this by passing a `fieldComponents` prop to the `FormProvider` component, which should be an object with keys that match the `type` of the fields you want to use, and values that are the field components themselves.

For example, you can use `FormProvider` to specify the default field components provided by the `@tutim/fields` library, or you can create your own custom field components and use them in the wizard.

Here is an example of how to use `FormProvider` to specify the default field components provided by the `@tutim/fields` library:

```jsx
import { FormProvider } from '@tutim/headless';
import { defaultFields, TutimWizard } from '@tutim/fields';

const App = (): JSX.Element => {
  return (
    <div className="App">
      <FormProvider fieldComponents={defaultFields}>
        <TutimWizard onSubmit={console.log} config={{ fields: [{ key: 'field1' }] }} />
      </FormProvider>
    </div>
  );
};

export default App;
```

This will render a form with a single field, using the default field component provided by the `@tutim/fields` library. When the form is submitted, the data entered into the field will be logged to the console.

## Remote schema example

Forms built on the [`Admin Portal`](https://github.com/tutim-io/docs/blob/main/react-sdk/broken-reference/README.md) could be served in real-time using the `FormProvider`

add `clientId` to your `FormProvider Options`

use `formId` in your forms instead of config in `TutimWizard` , `useForm` or if you want to manipulate the config, you could also use it with `useFormConfig`.

```jsx
import { TutimWizard, defaultFields } from "@tutim/fields";
import { FormProvider } from "@tutim/headless";

const App = () => {
  return (
    <FormProvider
      fieldComponents={defaultFields}
      options={{ clientId: "INSERT_CLIENT_ID_HERE" }}
    >
      <TutimWizard onSubmit={console.log} formId="INSERT_FORM_ID_HERE" />
    </FormProvider>
  );
};

export default App;
```

You can customize the form fields by creating your own custom field components and using them

## Advanced example

You can customize the form fields by creating your own custom field components and using them with `FormProvider`. To do this, you will need to define the custom field components and add them to the `fieldComponents` object passed to the `FormProvider` component.

For example, you can create a custom field component that renders a button that increments a number when clicked, and use it in the form by specifying the `type` of the field as `'custom-field'`:

```javascript
import { FormProvider } from '@tutim/headless';
import { Field, FieldComponents, InputType } from '@tutim/types';

export const CustomField: Field = ({ inputProps, fieldConfig }) => {
  const { value, onChange } = inputProps;
  const onClick = () => onChange(value + 2);
  return (
    <button type="button" onClick={onClick}>
      {fieldConfig.label}: {value}
    </button>
  );
};

const fieldComponents: FieldComponents = {
  [InputType.Text]: ({ inputProps }) => <input {...inputProps} />,
  'custom-field': (fieldProps) => <CustomField {...fieldProps} />,
  // add any type of input and reference it by 'type'
};

const App = (): JSX.Element => {
  return (
    <div className="App">
      <FormProvider fieldComponents={fieldComponents}>
        <TutimWizard
          onSubmit={console.log}
          config={{
            fields: [
              { key: 'textField', label: 'Text Field', type: 'text' },
              { key: 'customField', label: 'Custom Field', type: 'custom-field', defaultValue: 0 },
            ],
          }}
        />
      </FormProvider>
    </div>
  );
};

export default App;
```

This will render a form with two fields: a text input field and a custom field that renders a button. The custom field will increment its value by 2 every time the button is clicked. When the form is submitted, the data entered into the fields will be logged to the console.


---

# 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.tutim.io/react-sdk/formprovider.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.