> ## 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.

# Form Filling SDK Basic Usage

> Learn how to create a React encounter page with FormFilling, submit handling, and useFormFilling session status using the Form filling SDK

This example shows how to create a React encounter page that integrates the Form filling SDK. The clinician starts Form filling from a button, completes the assessment, and your app receives the structured results in the `onSubmit` callback.

The example creates a `FormFillingClient` with `useMemo`, wraps the app with `FormFillingProvider`, and renders `<FormFilling>` only while a session is active. A sibling component uses `useFormFilling()` to track the session state and error without letting a stale error hide an active session.

```jsx React theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
import { useMemo, useState } from "react";
import { SukiAuthManager } from "@suki-sdk/core";
import {
  FormFillingClient,
  FormFillingProvider,
  FormFilling,
  useFormFilling,
} from "@suki-sdk/form-filling-react";

function FormFillingStatus() {
  const { isSessionActive, error } = useFormFilling();

  // Prefer session state. The provider keeps the last error until the next
  // form-filling:error, so do not return early on error alone after a retry.
  if (isSessionActive) {
    return <p>Form session active: speak to fill fields.</p>;
  }

  if (error) {
    return (
      <p role="alert">
        Form filling error ({error.code}): {error.message}
      </p>
    );
  }

  return null;
}

export function NursingEncounterPage({ encounterId }) {
  const client = useMemo(() => {
    const authManager = new SukiAuthManager({
      partnerId: "YOUR_PARTNER_ID", // required
      partnerToken: "YOUR_PARTNER_TOKEN", // required
      environment: "staging",
      loginOnInitialize: true,
      autoRegister: false, // optional (default true); when true, provider fields below are often required
      providerId: "YOUR_PROVIDER_ID", // required
      providerName: "Dr. Jane Smith",
    });
    return new FormFillingClient({ authManager });
  }, []);

  const [showForms, setShowForms] = useState(false);

  const handleSubmit = (result) => {
    for (const form of result.structured_data.generated_values) {
      console.log(form.form_template_id, form.data);
    }
    setShowForms(false);
  };

  return (
    <FormFillingProvider client={client}>
      <h1>Encounter {encounterId}</h1>
      <FormFillingStatus />
      <button type="button" onClick={() => setShowForms(true)} disabled={showForms}>
        Start Form filling
      </button>
      {showForms && (
        <FormFilling
          form_template_ids={["YOUR_TEMPLATE_ID_A", "YOUR_TEMPLATE_ID_B"]}
          correlation_id={encounterId}
          onSubmit={handleSubmit}
          onCancel={() => setShowForms(false)}
          onBackgroundSubmit={handleSubmit}
        />
      )}
    </FormFillingProvider>
  );
}
```

<Note>
  Pass one `form_template_id` to skip the selection screen. Pass two or more to show multi-form selection. Refer to [Session workflow](/form-filling-sdk/guides/integration-patterns) for more details.
</Note>

## Next steps

<Icon icon="file-lines" iconType="solid" /> Refer to [Configuration examples](/form-filling-sdk/guides/examples/configuration-examples) for minimal auth and client setup

<Icon icon="file-lines" iconType="solid" /> Refer to [EHR handoff](/form-filling-sdk/examples/ehr-handoff) to map `structured_data` to your EHR

<Icon icon="file-lines" iconType="solid" /> Refer to [Formfillingclient](/form-filling-sdk/api-reference/form-filling-client) for `useFormFilling()` return values