Plugin Docs

Appearance

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 ​

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 ​

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.

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

Attributes: name, disabled

Use Cases: AMP form service selection

MULTIPLE_SELECT ​

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 ​

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 ​

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 ​

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

© 2026 Stripо.email — Next Generation Email Editor.