---
url: https://plugin.stripo.email/extensions/reference/api/UIElementApi.md
---
# UIElementApi

API interface for UI element implementations in the Stripo Email Editor Extensions SDK.

```typescript
interface UIElementApi extends BaseApi
```

## Description

The `UIElementApi` interface provides API functionality for custom UI elements used within controls. It extends the `BaseApi` interface and adds methods for handling value changes. UI elements are the building blocks of control interfaces - inputs, toggles, selects, and other interactive components.

## Import

```typescript
import { UIElementApi } from '@stripoinc/ui-editor-extensions';
```

## Inheritance

* Extends: [BaseApi](./BaseApi.md)

## Properties

None (all functionality provided through methods)

## Methods

### triggerValueChange()

Function to be called by the UIElement implementation when its value changes. This signals the change to the managing control.

```typescript
triggerValueChange(value: unknown): void
```

#### Parameters

| Parameter | Type | Description |
|-----------|------|-------------|
| value | `unknown` | The new value of the UI element |

#### Usage Notes

* Call this whenever the element's value changes
* The control receives this through its value change handlers
* Triggers validation and dependent updates
* Essential for two-way data binding

#### Example

```typescript
import {UIElement} from '@stripoinc/ui-editor-extensions';

export class CustomSlider extends UIElement {
    getId() {
        return 'custom-slider';
    }

    getTemplate() {
        return `
          <div class="custom-slider-container">
            <input type="range" class="slider" min="0" max="100" value="50">
            <span class="value-display">50</span>
          </div>
        `;
    }

    onRender(container) {
        this.slider = container.querySelector('.slider');
        this.display = container.querySelector('.value-display');

        this.slider.addEventListener('input', (event) => {
            const value = parseInt(event.target.value);
            this.display.textContent = value;

            // Notify the editor of the value change
            this.api.triggerValueChange(value);
        });
    }

    getValue() {
        return parseInt(this.slider.value);
    }

    setValue(value) {
        this.slider.value = value;
        this.display.textContent = value;
    }
}
```

***

## Inherited Methods from BaseApi

[BaseApi](./BaseApi.md) - Base API interface