UEAttr

Configuration object defining supported attributes for UI elements.

typescript

const UEAttr: {
  DEFAULT: UIElementAttributes;
  BUTTON: ButtonAttributes;
  CHECKBOX: CheckBoxAttributes;
  CHECK_BUTTONS: CheckButtonsAttributes;
  COLOR: UIElementAttributes;
  COUNTER: CounterAttributes;
  DATEPICKER: DatePickerAttributes;
  LABEL: LabelAttributes;
  MESSAGE: MessageAttributes;
  RADIO_BUTTONS: RadioButtonsAttributes;
  SELECTPICKER: SelectAttributes;
  FONT_FAMILY_SELECT: FontFamilySelectAttributes;
  SWITCHER: UIElementAttributes;
  TEXT: TextAttributes;
  RICH_TEXT: RichTextAttributes;
  TEXTAREA: TextAreaAttributes;
  ICON: IconAttributes;
  CHECK_ITEM: CheckItemAttributes;
  SELECT_ITEM: SelectItemAttributes;
  RADIO_ITEM: RadioItemAttributes;
  NESTED_CONTROL: NestedControlAttributes;
  EXPANDABLE: ExpandableAttributes;
  ORDERABLE: OrderableAttributes;
  ORDERABLE_ITEM: OrderableItemAttributes;
  ORDERABLE_ICON: OrderableIconAttributes;
  REPEATABLE: UIElementAttributes;
  DRAGGABLE_BLOCK: UIElementAttributes;
  AMP_FORM_SERVICE_PICKER: UIElementAttributes;
  MULTIPLE_SELECT: TextAttributes;
}

Description

UEAttr provides comprehensive attribute definitions for all UI elements in the Stripo Email Editor. Each UI element type has specific attributes that control its appearance, behavior, and data handling. These attributes can be set in templates or modified dynamically through the UIElement API.

Import

typescript

import { UEAttr } from '@stripoinc/ui-editor-extensions';

Common Attributes

DEFAULT

Base attributes shared by all UI elements.

typescript

DEFAULT: {
  name: 'name',
  disabled: 'disabled'
}

Attribute	Type	Description
name	`string`	Element identifier
disabled	`boolean`	Disable interaction

Input Element Attributes

BUTTON

Button element attributes.

typescript

BUTTON: {
  name: 'name',
  disabled: 'disabled',
  caption: 'caption',
  icon: 'icon'
}

Attribute	Type	Description
caption	`string`	Button text
icon	`string`	Icon identifier

CHECKBOX

Checkbox element attributes.

typescript

CHECKBOX: {
  name: 'name',
  disabled: 'disabled',
  caption: 'caption'
}

Attribute	Type	Description
caption	`string`	Checkbox label

CHECK_BUTTONS

Check button group attributes.

typescript

CHECK_BUTTONS: {
  name: 'name',
  disabled: 'disabled',
  buttons: 'buttons'
}

Attribute	Type	Description
buttons	`string`	Button configuration

COUNTER

Numeric counter attributes.

typescript

COUNTER: {
  name: 'name',
  disabled: 'disabled',
  minValue: 'min-value',
  maxValue: 'max-value',
  step: 'step',
  counterRangeEnabled: 'counter-range-enabled',
  counterRangeHeight: 'counter-range-height'
}

Attribute	Type	Description
minValue	`number`	Minimum value
maxValue	`number`	Maximum value
step	`number`	Increment step
counterRangeEnabled	`boolean`	Allow changing the value by dragging horizontally over the areas above and below the counter. Defaults to `true` (available from v3.11.0)
counterRangeHeight	`number`	Height of the drag areas in pixels. Defaults to `10` (available from v3.11.0)

DATEPICKER

Date picker attributes.

typescript

DATEPICKER: {
  name: 'name',
  disabled: 'disabled',
  placeholder: 'placeholder',
  minDate: 'min-date'
}

Attribute	Type	Description
placeholder	`string`	Placeholder text
minDate	`string`	Minimum selectable date

Text Input Attributes

TEXT

Text input attributes.

typescript

TEXT: {
  name: 'name',
  disabled: 'disabled',
  placeholder: 'placeholder'
}

Attribute	Type	Description
placeholder	`string`	Placeholder text

RICH_TEXT

Version Availability

This attribute mapping is available starting from v3.11.0

Rich text input attributes. The rich text input supports merge tags: configured merge tags are displayed as chips, and the merge tag icon opens the merge tags picker.

typescript

RICH_TEXT: {
  name: 'name',
  disabled: 'disabled',
  placeholder: 'placeholder',
  hasMergeTagIcon: 'has-merge-tag-icon',
  maxLength: 'max-length',
  singleLine: 'single-line'
}

Attribute	Type	Description
placeholder	`string`	Placeholder text
hasMergeTagIcon	`boolean`	Show the merge tag icon. Defaults to `false`
maxLength	`number`	Maximum number of characters. Not limited by default
singleLine	`boolean`	Restrict input to a single line. Defaults to `true`; pass `false` for multi-line input

The merge tag icon is displayed only when merge tags are configured with the mergeTags initialization parameter or an ExternalMergeTagsLibrary is registered, and the element is not disabled.

TEXTAREA

Textarea attributes.

typescript

TEXTAREA: {
  name: 'name',
  disabled: 'disabled',
  placeholder: 'placeholder',
  resizable: 'resizable'
}

Attribute	Type	Description
placeholder	`string`	Placeholder text
resizable	`boolean`	Allow resizing

Selection Attributes

SELECTPICKER

Select dropdown attributes.

typescript

SELECTPICKER: {
  name: 'name',
  disabled: 'disabled',
  searchable: 'searchable',
  multiSelect: 'multi-select',
  placeholder: 'placeholder',
  items: 'items'
}

Attribute	Type	Description
searchable	`boolean`	Enable search
multiSelect	`boolean`	Allow multiple selection
placeholder	`string`	Placeholder text
items	`string`	Option items

FONT_FAMILY_SELECT

Font family selector attributes.

typescript

FONT_FAMILY_SELECT: {
  // All SELECTPICKER attributes plus:
  addCustomFontOption: 'add-custom-font-option'
}

Attribute	Type	Description
addCustomFontOption	`boolean`	Show "Add custom font" option

RADIO_BUTTONS

Radio button group attributes.

typescript

RADIO_BUTTONS: {
  name: 'name',
  disabled: 'disabled',
  buttons: 'buttons'
}

Attribute	Type	Description
buttons	`string`	Radio button configuration

Display Element Attributes

LABEL

Label element attributes.

typescript

LABEL: {
  name: 'name',
  disabled: 'disabled',
  text: 'text',
  hint: 'hint'
}

Attribute	Type	Description
text	`string`	Label text
hint	`string`	Tooltip text

MESSAGE

Message element attributes.

typescript

MESSAGE: {
  name: 'name',
  disabled: 'disabled',
  type: 'type',
  icon: 'icon'
}

Attribute	Type	Description
type	`string`	Message type (info/warning/error)
icon	`string`	Icon identifier (available from v3.10.0)

ICON

Icon element attributes.

typescript

ICON: {
  name: 'name',
  disabled: 'disabled',
  img: 'img',
  src: 'src',
  title: 'title',
  width: 'width',
  height: 'height',
  imageClass: 'image-class',
  hint: 'hint',
  isActive: 'is-active',
  visibility: 'visibility',
  transform: 'transform'
}

Attribute	Type	Description
img	`string`	Image element
src	`string`	Image source URL
title	`string`	Icon title
width	`number`	Icon width
height	`number`	Icon height
imageClass	`string`	CSS class for image
hint	`string`	Tooltip text
isActive	`boolean`	Active state
visibility	`string`	Visibility state
transform	`string`	CSS transform

Component Item Attributes

CHECK_ITEM

Checkbox item attributes.

typescript

CHECK_ITEM: {
  name: 'name',
  disabled: 'disabled',
  text: 'text',
  hint: 'hint',
  icon: 'icon',
  value: 'value'
}

Attribute	Type	Description
text	`string`	Item text
hint	`string`	Tooltip
icon	`string`	Item icon
value	`string`	Item value

RADIO_ITEM

Radio item attributes.

typescript

RADIO_ITEM: {
  name: 'name',
  disabled: 'disabled',
  text: 'text',
  hint: 'hint',
  icon: 'icon',
  value: 'value'
}

SELECT_ITEM

Select option attributes.

typescript

SELECT_ITEM: {
  name: 'name',
  disabled: 'disabled',
  text: 'text',
  value: 'value'
}

Attribute	Type	Description
text	`string`	Display text
value	`string`	Option value

NESTED_CONTROL

Nested control container attributes.

typescript

NESTED_CONTROL: {
  name: 'name',
  disabled: 'disabled',
  controlId: 'control-id'
}

Attribute	Type	Description
controlId	`string`	ID of nested control

Container Element Attributes

EXPANDABLE

Expandable container attributes.

typescript

EXPANDABLE: {
  name: 'name',
  expanded: 'expanded'
}

Attribute	Type	Description
expanded	`boolean`	Initial expanded state

ORDERABLE

Orderable list container attributes.

typescript

ORDERABLE: {
  name: 'name',
  icon: 'icon',
  position: 'position'
}

Attribute	Type	Description
icon	`string`	Icon name for drag handle
position	`'TOP' \| 'LEFT'`	Position of drag handle icon

ORDERABLE_ITEM

Orderable list item attributes.

typescript

ORDERABLE_ITEM: {
  name: 'name'
}

Attribute	Type	Description
name	`string`	Unique identifier for the item (optional, auto-generated if not provided)

ORDERABLE_ICON

Orderable item drag handle icon attributes.

typescript

ORDERABLE_ICON: {
  name: 'name',
  icon: 'icon'
}

Attribute	Type	Description
icon	`string`	Icon name to override parent's drag handle

REPEATABLE

Version Availability

This element is available starting from v3.5.0

Repeatable list container attributes.

typescript

REPEATABLE: {
  name: 'name',
  disabled: 'disabled'
}

Attribute	Type	Description
name	`string`	Element identifier
disabled	`boolean`	Disable interaction

DRAGGABLE_BLOCK

Version Availability

This element is available starting from v3.7.0

Draggable block element attributes.

typescript

DRAGGABLE_BLOCK: {
  name: 'name',
  disabled: 'disabled',
  blockId: 'block-id'
}

Attribute	Type	Description
blockId	`string`	Block ID to bind to the draggable element
name	`string`	Element identifier
disabled	`boolean`	Disable interaction

AMP_FORM_SERVICE_PICKER

Version Availability

This element is available starting from v3.8.0

AMP form service picker attributes.

For more details about configuring AMP services, see Initialization Settings: AMP Form Services.

typescript

AMP_FORM_SERVICE_PICKER: {
  name: 'name',
  disabled: 'disabled'
}

Attribute	Type	Description
name	`string`	Element identifier
disabled	`boolean`	Disable interaction

MULTIPLE_SELECT

Version Availability

This element is available starting from v3.8.0

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

typescript

MULTIPLE_SELECT: {
  name: 'name',
  disabled: 'disabled',
  placeholder: 'placeholder'
}

Attribute	Type	Description
name	`string`	Element identifier
disabled	`boolean`	Disable interaction
placeholder	`string`	Placeholder text shown when nothing is selected

Components

Additional Features

Tutorials and Examples

How-To

Complete Examples

Reference

API Interfaces

Block Components

Control Components

Core Components

Icons

Constants

Integrations

Template Modification

Node Interfaces

Settings Panel

Types

UI Elements

UEAttr ​

Description ​

Import ​

Common Attributes ​

DEFAULT ​

Input Element Attributes ​

BUTTON ​

CHECKBOX ​

CHECK_BUTTONS ​

COUNTER ​

DATEPICKER ​

Text Input Attributes ​

TEXT ​

RICH_TEXT ​

TEXTAREA ​

Selection Attributes ​

SELECTPICKER ​

FONT_FAMILY_SELECT ​

RADIO_BUTTONS ​

Display Element Attributes ​

LABEL ​

MESSAGE ​

ICON ​

Component Item Attributes ​

CHECK_ITEM ​

RADIO_ITEM ​

SELECT_ITEM ​

NESTED_CONTROL ​

Container Element Attributes ​

EXPANDABLE ​

ORDERABLE ​

ORDERABLE_ITEM ​

ORDERABLE_ICON ​

REPEATABLE ​

DRAGGABLE_BLOCK ​

AMP_FORM_SERVICE_PICKER ​

MULTIPLE_SELECT ​

UEAttr

Description

Import

Common Attributes

DEFAULT

Input Element Attributes

BUTTON

CHECKBOX

CHECK_BUTTONS

COUNTER

DATEPICKER

Text Input Attributes

TEXT

RICH_TEXT

TEXTAREA

Selection Attributes

SELECTPICKER

FONT_FAMILY_SELECT

RADIO_BUTTONS

Display Element Attributes

LABEL

MESSAGE

ICON

Component Item Attributes

CHECK_ITEM

RADIO_ITEM

SELECT_ITEM

NESTED_CONTROL

Container Element Attributes

EXPANDABLE

ORDERABLE

ORDERABLE_ITEM

ORDERABLE_ICON

REPEATABLE

DRAGGABLE_BLOCK

AMP_FORM_SERVICE_PICKER

MULTIPLE_SELECT