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

# Employer Component

> Live

### Overview

Enables employers or brokers to define a group, their members, and import any existing policies into Clasp. Surface this component to an employer or broker to self-serve their onboarding on to your platform for benefits.

After enrollment is complete, the Component will serve as a centralized interface for administrators to manage, monitor, and analyze all aspects of their company's benefits program, including plan options, enrolled employees, and usage statistics.

### Usage

1. Import the `ClaspEmployer` from the SDK.

```TSX theme={null}
import { ClaspEmployer } from "clasp-components";
```

2. Define the components config object.

```ts theme={null}
let claspConfig = {
    employerId: "er_12345"
    apiClient: 'mock'
    employerName: "My Custom Company Name"
    navigation: 'state'
}
```

| Field        | Usage    | Type                      | Description                                                                                                                    |
| ------------ | -------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| employerId   | Optional | String                    | The Clasp employer ID. If not passed in, automatically populates with mock data.                                               |
| employerName | Optional | String                    | The name of the employer that you would like to show up in the Component.                                                      |
| apiClient    | Optional | `mock`, `sandbox`, `prod` | `mock` (default) serves mock data, `sandbox` calls Clasp's sandbox endpoints, and prod is to be passed when used in production |
| navigation   | Optional | `url`, `state`            | `url` leverages query params, `state` (default) is if you manage clasp-components as a controlled component                    |

3. Call the component and pass in config via props.

```TSX theme={null}
<ClaspEmployer config={claspConfig} />
```