# Field Comparison Module

:::note
This guide is specific to Web SDK 2.0. If you are still using 1.x, you can find documentation [here](/sdk-reference/web-sdk-reference).  Contact your Incode Representative for upgrade information and check if you are a candidate for this upgrade. <br /><br />Full rollout to all clients still TBD.
:::

The Field Comparison module collects the user's first and last name and submits them for backend verification against data already on file for the session.

> Follows the [form-based pattern](/sdk-reference/web-sdk-2-module-patterns/#1-form-based-modules). See the patterns page for the shared lifecycle.

## Tag

`<incode-field-comparison>` is a standard Web Component. Importing the UI subpath registers the custom element; importing the CSS applies the module's styles.

```ts
import '@incodetech/web/field-comparison';
import '@incodetech/web/field-comparison/styles.css';
```

## Properties

| Property   | Type                      | Required | Description                            |
| ---------- | ------------------------- | -------- | -------------------------------------- |
| `config`   | `FieldComparisonConfig`   | ❌       | No options                             |
| `onFinish` | `() => void`              | ❌       | Called when the module completes        |
| `onError`  | `(error: string) => void` | ❌       | Called when an error occurs             |

## Configuration

The module takes no configuration — the backend sends an empty module configuration for this step:

```typescript
type FieldComparisonConfig = Record<string, never>;
```

Which fields the backend compares, and how it scores the result, is configured server-side.

## State machine

`FieldComparisonState` is a discriminated union over `status`:

| Status       | Description                                                   |
| ------------ | ------------------------------------------------------------- |
| `idle`       | Initial state, waiting for `load()`.                          |
| `inputting`  | Form rendered; the user enters their name.                     |
| `submitting` | Sending the entered names to the backend.                     |
| `success`    | Submission accepted.                                          |
| `finished`   | Terminal.                                                     |
| `error`      | Submission failed; the user can retry or skip.                |

When `status === 'inputting'`:

| Property     | Type                     | Description                                                      |
| ------------ | ------------------------ | ---------------------------------------------------------------- |
| `fields`     | `FieldComparisonFields`  | Current values: `{ firstName, lastName }`.                        |
| `canSubmit`  | `boolean`                | `true` when both names have values and submitting is allowed.     |

`submitting` carries the same `fields`, frozen at submission time, so you can keep the form visible while the request is in flight.

## API methods

| Method                    | Purpose                                                                   |
| ------------------------- | ------------------------------------------------------------------------- |
| `load()`                  | Starts the module. Moves `idle` → `inputting`. Call this first.            |
| `setField(field, value)`  | Update one field. `field` is `'firstName'` or `'lastName'`.                |
| `submit()`                | Submit the entered names. Available when `canSubmit` is `true`.            |
| `retry()`                 | Retry after an `error`.                                                   |
| `skip()`                  | Skip the module and finish without submitting.                            |

Plus the universal lifecycle: `subscribe`, `getState`, `reset`, `stop`.

## Headless example

```typescript
import { setup } from '@incodetech/core';
import { createFieldComparisonManager } from '@incodetech/core/field-comparison';

const manager = createFieldComparisonManager({ config: {} });

manager.subscribe((state) => {
  if (state.status === 'inputting') {
    renderForm(state.fields, state.canSubmit);
  }
  if (state.status === 'finished') {
    console.log('Field comparison complete');
  }
});

manager.load();

// Wire your inputs to setField, then submit.
manager.setField('firstName', 'Ada');
manager.setField('lastName', 'Lovelace');
manager.submit();
```

## See also

- [Module: Cross-Document Data Match](/sdk-reference/web-sdk-2-module-cross-doc-match/): compares data across captured documents
- [Module Patterns → form-based](/sdk-reference/web-sdk-2-module-patterns/#1-form-based-modules)
- [Individual Modules](/sdk-reference/web-sdk-2-individual-modules/)