---
url: https://plugin.stripo.email/extensions/reference/constants/UIElementType.md
---
# UIElementType

Enum defining all available UI element types in the editor.

```typescript
enum UIElementType
```

## Description

`UIElementType` enumerates all the standard UI elements available in the Stripo Email Editor. These elements are the building blocks for creating controls and user interfaces within extensions. Each element type has specific attributes and behaviors that make them suitable for different interaction patterns.

## Import

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

## Input Elements

### BUTTON

Clickable button element.

```typescript
BUTTON = 'UE-BUTTON'
```

**Attributes**: caption, icon, disabled, name

**Use Cases**: Actions, triggers, confirmations

***

### CHECKBOX

Single checkbox input.

```typescript
CHECKBOX = 'UE-CHECKBOX'
```

**Attributes**: caption, disabled, name

**Use Cases**: Boolean options, feature toggles

***

### CHECK\_BUTTONS

Group of checkbox buttons.

```typescript
CHECK_BUTTONS = 'UE-CHECK-BUTTONS'
```

**Attributes**: buttons, disabled, name

**Use Cases**: Multiple selection from options

***

### RADIO\_BUTTONS

Group of radio buttons.

```typescript
RADIO_BUTTONS = 'UE-RADIO-BUTTONS'
```

**Attributes**: buttons, disabled, name

**Use Cases**: Single selection from options

***

### SWITCHER

Toggle switch element.

```typescript
SWITCHER = 'UE-SWITCHER'
```

**Attributes**: disabled, name

**Use Cases**: On/off states, feature enablement

## Text Input Elements

### TEXT

Single-line text input.

```typescript
TEXT = 'UE-TEXT'
```

**Attributes**: placeholder, disabled, name

**Use Cases**: Short text, names, titles

***

### RICH\_TEXT

:::::tip Version Availability
This element is available starting from v3.10.0. Attribute mapping in `UEAttr.RICH_TEXT` is available starting from v3.11.0
:::::

Text input with merge tags support.

```typescript
RICH_TEXT = 'UE-RICH-TEXT'
```

**Attributes**: placeholder, hasMergeTagIcon, maxLength, singleLine, disabled, name

**Use Cases**: Personalized texts, titles, and labels with merge tags

***

### TEXTAREA

Multi-line text input.

```typescript
TEXTAREA = 'UE-TEXTAREA'
```

**Attributes**: placeholder, resizable, disabled, name

**Use Cases**: Long text, descriptions, content

## Selection Elements

### SELECTPICKER

Dropdown select element.

```typescript
SELECTPICKER = 'UE-SELECT'
```

**Attributes**: searchable, multiSelect, placeholder, items, disabled, name

**Use Cases**: Choosing from many options

***

### FONT\_FAMILY\_SELECT

Specialized font family selector.

```typescript
FONT_FAMILY_SELECT = 'UE-FONT-FAMILY-SELECT'
```

**Attributes**: All select attributes plus addCustomFontOption

**Use Cases**: Font selection with custom font support

***

### AMP\_FORM\_SERVICE\_PICKER

:::::tip Version Availability
This element is available starting from v3.8.0
:::::

AMP form service picker element.

For more details about configuring AMP services, see [Initialization Settings: AMP Form Services](https://plugin.stripo.email/editor-configuration/initialization-settings#amp-form-services).

```typescript
AMP_FORM_SERVICE_PICKER = 'UE-AMP-FORM-SERVICE-PICKER'
```

**Attributes**: name, disabled

**Use Cases**: AMP form service selection

***

### MULTIPLE\_SELECT

:::::tip Version Availability
This element is available starting from v3.8.0
:::::

Multiple select input element. This UI element allows users to manage an array of tags in a single input.

```typescript
MULTIPLE_SELECT = 'UE-MULTIPLE_SELECT'
```

**Attributes**: placeholder, disabled, name

**Use Cases**: Selecting multiple values with a dedicated UI element

## Specialized Input Elements

### COLOR

Color picker element.

```typescript
COLOR = 'UE-COLOR'
```

**Attributes**: disabled, name

**Use Cases**: Color selection

***

### COUNTER

Numeric counter input.

```typescript
COUNTER = 'UE-COUNTER'
```

**Attributes**: minValue, maxValue, step, counterRangeEnabled, counterRangeHeight, disabled, name

**Use Cases**: Numeric values, quantities

***

### DATEPICKER

Date selection element.

```typescript
DATEPICKER = 'UE-DATEPICKER'
```

**Attributes**: placeholder, minDate, disabled, name

**Use Cases**: Date selection, scheduling

***

### MERGETAGS

Merge tag selector.

```typescript
MERGETAGS = 'UE-MERGETAGS'
```

**Attributes**: disabled, name

**Use Cases**: Dynamic content insertion

## Display Elements

### LABEL

Text label element.

```typescript
LABEL = 'UE-LABEL'
```

**Attributes**: text, hint, name

**Use Cases**: Field labels, descriptions

***

### MESSAGE

Message display element.

```typescript
MESSAGE = 'UE-MESSAGE'
```

**Attributes**: type, icon, disabled, name

**Use Cases**: Info, warning, error messages

***

### ICON

Icon display element.

```typescript
ICON = 'UE-ICON'
```

**Attributes**: img, src, title, width, height, hint, disabled, visibility

**Use Cases**: Visual indicators, buttons with icons

## Component Elements

### CHECK\_ITEM

Individual checkbox item.

```typescript
CHECK_ITEM = 'UE-CHECK-ITEM'
```

**Attributes**: text, hint, icon, value, disabled, name

**Use Cases**: Item in checkbox group

***

### RADIO\_ITEM

Individual radio button item.

```typescript
RADIO_ITEM = 'UE-RADIO-ITEM'
```

**Attributes**: text, hint, icon, value, disabled, name

**Use Cases**: Item in radio group

***

### SELECT\_ITEM

Individual select option.

```typescript
SELECT_ITEM = 'UE-SELECT-ITEM'
```

**Attributes**: text, value, disabled, name

**Use Cases**: Option in select dropdown

## Container Elements

### EXPANDABLE

Expandable/collapsible container.

```typescript
EXPANDABLE = 'UE-EXPANDABLE'
```

**Attributes**: expanded, name

**Use Cases**: Collapsible sections, grouped controls

***

### EXPANDABLE\_HEADER

Header section of an expandable container.

```typescript
EXPANDABLE_HEADER = 'UE-EXPANDABLE_HEADER'
```

**Attributes**: N/A

**Use Cases**: Title/header area for expandable sections

***

### EXPANDABLE\_CONTENT

Content section of an expandable container.

```typescript
EXPANDABLE_CONTENT = 'UE-EXPANDABLE_CONTENT'
```

**Attributes**: N/A

**Use Cases**: Collapsible content area

***

### ORDERABLE

Reorderable list container.

```typescript
ORDERABLE = 'UE-ORDERABLE'
```

**Attributes**: icon, position, name

**Use Cases**: Drag-and-drop reordering of items

***

### ORDERABLE\_ITEM

Individual item within an orderable list.

```typescript
ORDERABLE_ITEM = 'UE-ORDERABLE-ITEM'
```

**Attributes**: name

**Use Cases**: Items that can be reordered within an orderable container

***

### ORDERABLE\_ICON

Custom drag handle icon for an orderable item.

```typescript
ORDERABLE_ICON = 'UE-ORDERABLE-ICON'
```

**Attributes**: icon, name

**Use Cases**: Override default drag handle for specific items

***

### NESTED\_CONTROL

Container for nested control elements.

```typescript
NESTED_CONTROL = 'UE-NESTED-CONTROL'
```

**Attributes**: controlId

**Use Cases**: Embedding controls within other controls

***

### REPEATABLE

:::tip Version Availability
This element is available starting from v3.5.0
:::

Container for repeatable list of items.

```typescript
REPEATABLE = 'UE-REPEATABLE'
```

**Attributes**: name

**Use Cases**: Dynamic lists of items (e.g., gallery items, menu links, social icons)

***

### DRAGGABLE\_BLOCK

::::tip Version Availability
This element is available starting from v3.7.0
::::

Draggable block reference element.

```typescript
DRAGGABLE_BLOCK = 'UE-DRAGGABLE-BLOCK'
```

**Attributes**: block-id, name, disabled

**Use Cases**: Drag-and-drop block selectors, module pickers

***

### SCROLLABLE

:::::tip Version Availability
This element is available starting from v3.8.0
:::::

Scrollable container element.

```typescript
SCROLLABLE = 'UE-SCROLLABLE-CONTAINER'
```

**Attributes**: No dedicated `UEAttr` mapping is currently documented

**Use Cases**: Scrollable side panels, constrained lists, overflow-heavy layouts