> For the complete documentation index, see [llms.txt](https://developer.usemultiplier.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.usemultiplier.com/multiplier-embed-sdks/component-customization.md).

# Component customization

{% hint style="info" %}
Note: Your component must be wrapped with class `multiplier-sdk-customize` , in order to prevent CSS Reset from Tailwind
{% endhint %}

The component customization system supports:

* **Button**: Customize all button components throughout the SDK
* **ComboBox**: Customize all dropdown/select components throughout the SDK

You can provide custom components at three levels with the following priority (highest to lowest):

{% stepper %}
{% step %}

### Step Level

Individual step components (e.g., Eligibility, BasicDetails)
{% endstep %}

{% step %}

### Container Level

EmployeeOnboarding.Container
{% endstep %}

{% step %}

### Global Level

MultiplierGlobalConfigProvider
{% endstep %}
{% endstepper %}

### Level 1: Global Provider Customization

Apply custom components across the entire SDK by passing the `components` prop to `MultiplierGlobalConfigProvider`.

{% code title="App.tsx" %}

```tsx
import {
  MultiplierGlobalConfigProvider,
  createGlobalConfig,
  ButtonComponentProps,
  ComponentUIContextValue
} from '@Multiplier-Core/partner-sdk-react';

function App() {
  const config = createGlobalConfig()
    .setAccessToken('your-token')
    .setEnvironment('production')
    .build();

  // Define custom Button component
  const CustomButton = (props: ButtonComponentProps) => {
    const { variant, loading, disabled, onClick, children, ...rest } = props;

    return (
      <button
        {...rest}
        onClick={onClick}
        disabled={disabled || loading}
        className="multiplier-sdk-customize custom-btn"
        style={{
          backgroundColor: '#3b82f6',
          color: 'white',
          padding: '8px 16px',
          borderRadius: '4px',
          border: 'none',
          cursor: disabled || loading ? 'not-allowed' : 'pointer',
          opacity: disabled || loading ? 0.6 : 1
        }}
      >
        {loading ? 'Loading...' : children}
      </button>
    );
  };

  // Define custom ComboBox component
  const CustomComboBox = (props: ComboBoxComponentProps) => {
    return (
      <select
        {...props}
        className="multiplier-sdk-customize custom-select"
        style={{
          padding: '8px',
          borderRadius: '4px',
          border: '1px solid #ccc'
        }}
      >
        {/* Render options based on props */}
      </select>
    );
  };

  const components: ComponentUIContextValue = {
    Button: CustomButton,
    ComboBox: CustomComboBox
  };

  return (
    <MultiplierGlobalConfigProvider 
      config={config}
      components={components}
    >
      {/* Your app components */}
    </MultiplierGlobalConfigProvider>
  );
}
```

{% endcode %}

### Level 2: Container Level Customization

Override components specifically for the EmployeeOnboarding flow by passing the `components` prop to `EmployeeOnboarding.Container`.

{% code title="OnboardingPage.tsx" %}

```tsx
import {
  EmployeeOnboarding,
  ComponentUIContextValue,
  ButtonComponentProps
} from '@Multiplier-Core/partner-sdk-react';

function OnboardingPage() {
  const CustomButton = (props: ButtonComponentProps) => {
    return (
      <button
        {...props}
        className="multiplier-sdk-customize onboarding-btn"
        style={{
          backgroundColor: '#10b981',
          color: 'white',
          padding: '10px 20px',
          borderRadius: '6px'
        }}
      >
        {props.children}
      </button>
    );
  };

  const components: ComponentUIContextValue = {
    Button: CustomButton
  };

  return (
    <EmployeeOnboarding.Container
      id="contract-123"
      components={components}
      onComplete={(result) => console.log('Completed:', result)}
    />
  );
}
```

{% endcode %}

### Level 3: Step Level Customization

Override components for individual step screens within the onboarding container. Each step component (Eligibility, BasicDetails, Compensation, etc.) allows them to accept custom components through the Container's `components` prop.

**Note**: Step-level components inherit the `components` prop from their parent Container. The customization is applied through the Container level, but takes effect at the individual step level.

{% code title="OnboardingPage-Eligibility.tsx" %}

```tsx
import {
  EmployeeOnboarding,
  ComponentUIContextValue,
  ButtonComponentProps
} from '@Multiplier-Core/partner-sdk-react';

function OnboardingPage() {
  // Custom button specifically for eligibility step
  const EligibilityButton = (props: ButtonComponentProps) => {
    return (
      <button
        {...props}
        className="multiplier-sdk-customize eligibility-btn"
        style={{
          backgroundColor: '#8b5cf6',
          color: 'white',
          padding: '12px 24px',
          borderRadius: '8px',
          fontWeight: 'bold'
        }}
      >
        {props.children}
      </button>
    );
  };

  const components: ComponentUIContextValue = {
    Button: EligibilityButton
  };

  return (
    <EmployeeOnboarding.Container
      id="contract-123"
      components={components}
      renderEligibility={(props) => (
        <EmployeeOnboarding.Eligibility {...props} />
      )}
    />
  );
}
```

{% endcode %}

### ComponentUIContextValue Interface

```typescript
interface ComponentUIContextValue {
  Button?: (props: ButtonComponentProps) => React.ReactElement | null | undefined;
  ComboBox?: (props: ComboBoxComponentProps) => React.ReactElement | null | undefined;
}
```

| Property   | Type                                                                         | Description                                                                   |
| ---------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| `Button`   | `(props: ButtonComponentProps) => React.ReactElement \| null \| undefined`   | Custom Button component. Return `null` to hide, `undefined` to use default.   |
| `ComboBox` | `(props: ComboBoxComponentProps) => React.ReactElement \| null \| undefined` | Custom ComboBox component. Return `null` to hide, `undefined` to use default. |

#### ButtonComponentProps Interface

```typescript
import { ButtonComponentProps } from '@Multiplier-Core/partner-sdk-react';
```

| Property      | Type                                                                                                                       | Required | Description                                                     |
| ------------- | -------------------------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------- |
| `size`        | `'small' \| 'medium' \| 'large'`                                                                                           | No       | Defines the size of the button                                  |
| `variant`     | `'primary' \| 'secondary' \| 'tertiary' \| 'outline' \| 'default' \| 'inline' \| 'content' \| 'danger' \| 'dangerOutline'` | No       | Defines the visual style of the button                          |
| `loading`     | `boolean`                                                                                                                  | No       | When true, displays a loading indicator and disables the button |
| `selected`    | `boolean`                                                                                                                  | No       | When true, displays the button in a selected/active state       |
| `warning`     | `boolean`                                                                                                                  | No       | When true, displays the button with warning styling             |
| `styles`      | `TwStyle`                                                                                                                  | No       | Additional Tailwind CSS styles to apply to the button           |
| `tooltipNote` | `React.ReactNode`                                                                                                          | No       | Content to display in a tooltip when hovering over the button   |
| `disabled`    | `boolean`                                                                                                                  | No       | When true, disables the button                                  |
| `onClick`     | `(event: React.MouseEvent<HTMLButtonElement>) => void`                                                                     | No       | Click event handler                                             |
| `type`        | `'button' \| 'submit' \| 'reset'`                                                                                          | No       | Button type attribute                                           |
| `className`   | `string`                                                                                                                   | No       | CSS class names                                                 |
| `children`    | `React.ReactNode`                                                                                                          | No       | Button content                                                  |

Note: This interface extends all standard HTML button attributes (`React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>`).

#### ComboBoxComponentProps Interface

```typescript
import { ComboBoxComponentProps } from '@Multiplier-Core/partner-sdk-react';
```

| Property           | Type                                                                     | Required | Description                                             |
| ------------------ | ------------------------------------------------------------------------ | -------- | ------------------------------------------------------- |
| `id`               | `string`                                                                 | No       | Unique identifier for the combo box                     |
| `variant`          | `'default' \| 'disabled' \| 'autocomplete' \| 'inline' \| 'inline-text'` | Yes      | Visual style variant of the combo box                   |
| `value`            | `SingleValue<ValueType> \| MultiValue<ValueType>`                        | Yes      | Currently selected value(s)                             |
| `placeholder`      | `string \| React.ReactNode`                                              | Yes      | Text displayed when no option is selected               |
| `onChange`         | `(value: DropdownOnChange<ValueType, IsMulti>) => void`                  | Yes      | Callback fired when the selected value changes          |
| `queryPlaceholder` | `string \| React.ReactNode`                                              | No       | Placeholder text for the search/filter input field      |
| `disabled`         | `boolean`                                                                | No       | Whether the combo box is disabled                       |
| `error`            | `boolean`                                                                | No       | Whether to show error styling                           |
| `startAdornment`   | `React.ReactNode`                                                        | No       | Content to display at the start of the combo box button |
| `endAdornment`     | `React.ReactNode`                                                        | No       | Content to display at the end of the combo box button   |
| `clearable`        | `boolean`                                                                | No       | Whether to show a clear button when a value is selected |
| `onClear`          | `() => void`                                                             | No       | Callback fired when the clear button is clicked         |
| `multiple`         | `IsMulti`                                                                | No       | Whether multiple values can be selected                 |
| `selectedValue`    | `DropdownValueType`                                                      | No       | Currently selected dropdown value(s)                    |
| `values`           | `DropdownValue[]`                                                        | Yes      | Available options to display in the dropdown            |
| `selectedIndex`    | `number`                                                                 | Yes      | Index of the currently selected/highlighted option      |

Note: This is a generic interface `ComboBoxComponentProps<ValueType, IsMulti extends boolean = false>` where `ValueType` is the value type and `IsMulti` indicates if multiple selection is enabled.

## Notes

<details>

<summary>Return Value Behavior</summary>

* Returning a custom component: Replaces the SDK's default component with your custom implementation
* Returning `null`: Hides the component completely (useful for conditional rendering)
* Returning `undefined`: Resumes using the SDK's default component (useful for conditional customization)

</details>

<details>

<summary>Priority Order</summary>

When components are defined at multiple levels, the priority order is:

1. Step Level (highest priority)
2. Container Level (medium priority)
3. Global Level (lowest priority)

</details>

<details>

<summary>Integration with Design Systems</summary>

Material-UI Example:

{% code title="material-ui.tsx" %}

```typescript
import { Button as MuiButton } from '@mui/material';

const components: ComponentUIContextValue = {
  Button: (props) => <MuiButton {...props} variant="contained" />
};
```

{% endcode %}

Ant Design Example:

{% code title="antd.tsx" %}

```typescript
import { Button as AntButton } from 'antd';

const components: ComponentUIContextValue = {
  Button: (props) => <AntButton {...props} type="primary" />
};
```

{% endcode %}

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://developer.usemultiplier.com/multiplier-embed-sdks/component-customization.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.