# Consent Module

<WebSDK2 />

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](doc: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;
};
```

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

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

## See also

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