---
title: "Consent Module"
url: "https://developer.incode.com/sdk-reference/web-sdk-2-module-consent/"
section: "sdk-reference"
group: "Incode Web SDK 2 Reference / Web SDK 2 Individual Modules"
version: "v1.1"
status: "live"
---
# Consent 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 Consent module renders a consent form (terms text plus configurable checkboxes) and submits the user's selections. Used to capture optional or required user consents before downstream modules run.

> Follows the [form-based pattern](/sdk-reference/web-sdk-2-module-patterns/#1-form-based-modules), with an additional `display` state for showing the consent text and checkboxes. See the patterns page for the shared lifecycle.

## Tag

`<incode-consent>` 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/consent';
import '@incodetech/web/consent/styles.css';
```

## Properties

| Property   | Type                      | Required | Description                      |
| ---------- | ------------------------- | -------- | -------------------------------- |
| `config`   | `ConsentConfig`           | ❌       | Configuration options            |
| `onFinish` | `() => void`              | ❌       | Called when consent is submitted |
| `onError`  | `(error: string) => void` | ❌       | Called when an error occurs      |

## Configuration

```typescript
type ConsentConfig = {
  combinedConsents?: string;
  consentId?: string;
  language?: string;
};
```

| Option             | Type     | Required | Description                                                                           |
| ------------------ | -------- | -------- | ------------------------------------------------------------------------------------- |
| `combinedConsents` | `string` | ❌       | Identifier for a combined consents bundle from the dashboard. Backend-driven content. |
| `consentId`        | `string` | ❌       | Specific consent ID to load.                                                          |
| `language`         | `string` | ❌       | Language to fetch the consent text in. Defaults to the active SDK language from `setup({ i18n })`. Set it only to request consent copy in a different language than the rest of the flow. |

The actual consent text and checkbox definitions come from the backend (`fetchCombinedConsent`); the config just identifies which bundle to load.

## State machine

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

| Status       | Description                                                    |
| ------------ | -------------------------------------------------------------- |
| `idle`       | Initial state.                                                 |
| `loading`    | Fetching consent text + checkbox definitions from the backend. |
| `display`    | Rendering consents; user can toggle checkboxes.                |
| `submitting` | Sending the user's selections to the backend.                  |
| `finished`   | Terminal.                                                      |
| `error`      | Fatal error.                                                   |

## API methods

This module takes input through `toggleCheckbox`, not the `setField` shape the schema-driven form modules use.

| Method                       | Purpose                                                                      | Callable when       |
| ---------------------------- | ---------------------------------------------------------------------------- | ------------------- |
| `load()`                     | Fetch the consent text and checkbox definitions.                             | `idle`              |
| `toggleCheckbox(checkboxId)` | Flip one checkbox. Pass the `id` from the checkbox definitions on the state. | `display`           |
| `submit()`                   | Send the user's selections.                                                  | `display`           |
| `retry()`                    | Retry after a failed load or submit.                                         | `error`             |
| `reset()`                    | Return to `idle` from a terminal state.                                      | `finished`, `error` |

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

## See also

- [Module Patterns → form-based](/sdk-reference/web-sdk-2-module-patterns/#1-form-based-modules)
- [Individual Modules](/sdk-reference/web-sdk-2-individual-modules/)