> ## Documentation Index
> Fetch the complete documentation index at: https://developer.suki.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# FormFillingProps Type

> forms, correlation_id, and callbacks for the React FormFilling component

In React, pass the same session options as **`client.start()`** as props on **`FormFilling`**. You do not pass **`rootElement`**. The component renders the hosted UI in **`.suki-form-filling`** for you.

```tsx React theme={"theme":{"light":"one-light","dark":"material-theme-darker"}}
<FormFilling
  forms={[{ form_template_id: "YOUR_TEMPLATE_ID" }]}
  correlation_id="YOUR_ENCOUNTER_ID"
  onSubmit={(result) => {
    console.log(result.structured_data);
  }}
/>
```

## Properties

**FormFilling props**

**forms** `MedicalFormMetadata[]`

Same as **`start()`**. Preferred static, dynamic, or mixed form list. Refer to [Dynamic and static medical forms](https://developer.suki.ai/form-filling-sdk/guides/configuration.md#dynamic-and-static-medical-forms).

**form\_template\_ids** `string[]`

DEPRECATED Same as **`start()`**. This option still works when you omit **`forms`**. Prefer **`forms`**, because we will remove this option in a future major release.

**correlation\_id** `string`

Same as **`start()`**. Your encounter or appointment ID. Strongly recommended. Refer to [Encounter ID (`correlation_id`)](https://developer.suki.ai/form-filling-sdk/guides/configuration#correlation_id-your-encounter-id).

**onSubmit** `function` *required*

Same as **`start()`**. Required handler for structured results after processing completes. Refer to [Callbacks](https://developer.suki.ai/form-filling-sdk/guides/callbacks.md).

**onReady** `function`

Same as **`start()`**.

**onCancel** `function`

Same as **`start()`**.

**onBackgroundSubmit** `function`

**React only.** Called for **`form-filling:background-submitted`** when results arrive for a session that is no longer the active one while the iframe is open. Same payload shape as **`onSubmit`**.

Set height on **`.suki-form-filling`** before the hosted UI opens. Refer to [Container sizing](https://developer.suki.ai/form-filling-sdk/guides/configuration.md#container-sizing).

## Next steps

&#x20;**[StartOptions](https://developer.suki.ai/form-filling-sdk/api-reference/start-options.md)** - Matching fields for JavaScript **`client.start()`**.

&#x20;**[Configuration](https://developer.suki.ai/form-filling-sdk/guides/configuration.md)** - How to set **`forms`**, **`correlation_id`**, and container height.

&#x20;**[React integration](https://developer.suki.ai/form-filling-sdk/react-integration/react.md)** - Provider and **`FormFilling`** wiring.

&#x20;**[Callbacks](https://developer.suki.ai/form-filling-sdk/guides/callbacks.md)** - When **`onSubmit`**, **`onReady`**, and **`onCancel`** run.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.