---
url: https://plugin.stripo.email/extensions/reference/constants/UEAttr.md
---
# 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

:::::tip 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](/editor-configuration/initialization-settings#merge-tags-setup) initialization parameter or an [ExternalMergeTagsLibrary](../integrations/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

::::tip 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

::::tip 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

:::::tip 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](https://plugin.stripo.email/editor-configuration/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

:::::tip 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 |