Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Action List

The Action List component displays a list of related action items, enabling marketers to choose an action in context with immediate effect — for example, picking a personalization token to insert into a text field.

Action items can be filtered, grouped, and have various states (e.g. disabled, or selected).

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-actionlist

<e-actionlist>
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name">
    Last Name
  </e-actionlist-item>
  <e-actionlist-item value="email" disabled>
    Email
  </e-actionlist-item>
  <e-actionlist-item value="address">
    Address
  </e-actionlist-item>
  <e-actionlist-item value="city">
    City
  </e-actionlist-item>
  <e-actionlist-item value="state" selected>
    State
  </e-actionlist-item>
  <e-actionlist-item value="zip-code">
    ZIP Code
  </e-actionlist-item>
  <e-actionlist-item value="phone">
    Phone
  </e-actionlist-item>
  <e-actionlist-item value="mobile">
    Mobile
  </e-actionlist-item>
  <e-actionlist-item value="first-name-of-partner">
    First Name of Partner
  </e-actionlist-item>
  <e-actionlist-item value="anniversary">
    Anniversary
  </e-actionlist-item>
  <e-actionlist-item value="fax">
    Fax
  </e-actionlist-item>
  <e-actionlist-item value="date-of-birth">
    Date of Birth
  </e-actionlist-item>
</e-actionlist>
<e-actionlist>
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name">
    Last Name
  </e-actionlist-item>
  <e-actionlist-item value="email" disabled>
    Email
  </e-actionlist-item>
  <e-actionlist-item value="address">
    Address
  </e-actionlist-item>
  <e-actionlist-item value="city">
    City
  </e-actionlist-item>
  <e-actionlist-item value="state" selected>
    State
  </e-actionlist-item>
  <e-actionlist-item value="zip-code">
    ZIP Code
  </e-actionlist-item>
  <e-actionlist-item value="phone">
    Phone
  </e-actionlist-item>
  <e-actionlist-item value="mobile">
    Mobile
  </e-actionlist-item>
  <e-actionlist-item value="first-name-of-partner">
    First Name of Partner
  </e-actionlist-item>
  <e-actionlist-item value="anniversary">
    Anniversary
  </e-actionlist-item>
  <e-actionlist-item value="fax">
    Fax
  </e-actionlist-item>
  <e-actionlist-item value="date-of-birth">
    Date of Birth
  </e-actionlist-item>
</e-actionlist>
JavaScript
Copy JavaScript
First NameLast NameEmailAddressCityStateZIP CodePhoneMobileFirst Name of PartnerAnniversaryFaxDate of Birth

Variations

with groups
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<e-actionlist>
  <e-actionlist-group label="General Information">
    <e-actionlist-item value="first-name">
      First Name
    </e-actionlist-item>
    <e-actionlist-item value="last-name" selected>
      Last Name
    </e-actionlist-item>
    <e-actionlist-item value="email">
      Email
    </e-actionlist-item>
  </e-actionlist-group>
  <e-actionlist-group label="Personal Information">
    <e-actionlist-item value="address">
      Address
    </e-actionlist-item>
    <e-actionlist-item value="city">
      City
    </e-actionlist-item>
    <e-actionlist-item value="state">
      State
    </e-actionlist-item>
    <e-actionlist-item value="zip-code" disabled>
      ZIP Code
    </e-actionlist-item>
    <e-actionlist-item value="phone">
      Phone
    </e-actionlist-item>
    <e-actionlist-item value="mobile">
      Mobile
    </e-actionlist-item>
    <e-actionlist-item value="first-name-of-partner">
      First Name of Partner
    </e-actionlist-item>
    <e-actionlist-item value="anniversary">
      Anniversary
    </e-actionlist-item>
    <e-actionlist-item value="fax">
      Fax
    </e-actionlist-item>
    <e-actionlist-item value="date-of-birth">
      Date of Birth
    </e-actionlist-item>
  </e-actionlist-group>
</e-actionlist>
<e-actionlist>
  <e-actionlist-group label="General Information">
    <e-actionlist-item value="first-name">
      First Name
    </e-actionlist-item>
    <e-actionlist-item value="last-name" selected>
      Last Name
    </e-actionlist-item>
    <e-actionlist-item value="email">
      Email
    </e-actionlist-item>
  </e-actionlist-group>
  <e-actionlist-group label="Personal Information">
    <e-actionlist-item value="address">
      Address
    </e-actionlist-item>
    <e-actionlist-item value="city">
      City
    </e-actionlist-item>
    <e-actionlist-item value="state">
      State
    </e-actionlist-item>
    <e-actionlist-item value="zip-code" disabled>
      ZIP Code
    </e-actionlist-item>
    <e-actionlist-item value="phone">
      Phone
    </e-actionlist-item>
    <e-actionlist-item value="mobile">
      Mobile
    </e-actionlist-item>
    <e-actionlist-item value="first-name-of-partner">
      First Name of Partner
    </e-actionlist-item>
    <e-actionlist-item value="anniversary">
      Anniversary
    </e-actionlist-item>
    <e-actionlist-item value="fax">
      Fax
    </e-actionlist-item>
    <e-actionlist-item value="date-of-birth">
      Date of Birth
    </e-actionlist-item>
  </e-actionlist-group>
</e-actionlist>
JavaScript
Copy JavaScript
First NameLast NameEmailAddressCityStateZIP CodePhoneMobileFirst Name of PartnerAnniversaryFaxDate of Birth

Multiple selection
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
multiple

<e-actionlist multiple>
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name" selected>
    Last Name
  </e-actionlist-item>
  <e-actionlist-item value="email" disabled>
    Email
  </e-actionlist-item>
  <e-actionlist-item value="address">
    Address
  </e-actionlist-item>
  <e-actionlist-item value="city">
    City
  </e-actionlist-item>
  <e-actionlist-item value="state" selected>
    State
  </e-actionlist-item>
  <e-actionlist-item value="zip-code">
    ZIP Code
  </e-actionlist-item>
  <e-actionlist-item value="phone">
    Phone
  </e-actionlist-item>
  <e-actionlist-item value="mobile" selected>
    Mobile
  </e-actionlist-item>
  <e-actionlist-item value="first-name-of-partner">
    First Name of Partner
  </e-actionlist-item>
  <e-actionlist-item value="anniversary">
    Anniversary
  </e-actionlist-item>
  <e-actionlist-item value="fax">
    Fax
  </e-actionlist-item>
  <e-actionlist-item value="date-of-birth">
    Date of Birth
  </e-actionlist-item>
</e-actionlist>
<e-actionlist multiple>
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name" selected>
    Last Name
  </e-actionlist-item>
  <e-actionlist-item value="email" disabled>
    Email
  </e-actionlist-item>
  <e-actionlist-item value="address">
    Address
  </e-actionlist-item>
  <e-actionlist-item value="city">
    City
  </e-actionlist-item>
  <e-actionlist-item value="state" selected>
    State
  </e-actionlist-item>
  <e-actionlist-item value="zip-code">
    ZIP Code
  </e-actionlist-item>
  <e-actionlist-item value="phone">
    Phone
  </e-actionlist-item>
  <e-actionlist-item value="mobile" selected>
    Mobile
  </e-actionlist-item>
  <e-actionlist-item value="first-name-of-partner">
    First Name of Partner
  </e-actionlist-item>
  <e-actionlist-item value="anniversary">
    Anniversary
  </e-actionlist-item>
  <e-actionlist-item value="fax">
    Fax
  </e-actionlist-item>
  <e-actionlist-item value="date-of-birth">
    Date of Birth
  </e-actionlist-item>
</e-actionlist>
JavaScript
Copy JavaScript
First NameLast NameEmailAddressCityStateZIP CodePhoneMobileFirst Name of PartnerAnniversaryFaxDate of Birth

Height
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
height="200px"

<e-actionlist height="200px">
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name">
    Last Name
  </e-actionlist-item>
  <e-actionlist-item value="email" disabled>
    Email
  </e-actionlist-item>
  <e-actionlist-item value="address">
    Address
  </e-actionlist-item>
  <e-actionlist-item value="city">
    City
  </e-actionlist-item>
  <e-actionlist-item value="state" selected>
    State
  </e-actionlist-item>
  <e-actionlist-item value="zip-code">
    ZIP Code
  </e-actionlist-item>
  <e-actionlist-item value="phone">
    Phone
  </e-actionlist-item>
  <e-actionlist-item value="mobile">
    Mobile
  </e-actionlist-item>
  <e-actionlist-item value="first-name-of-partner">
    First Name of Partner
  </e-actionlist-item>
  <e-actionlist-item value="anniversary">
    Anniversary
  </e-actionlist-item>
  <e-actionlist-item value="fax">
    Fax
  </e-actionlist-item>
  <e-actionlist-item value="date-of-birth">
    Date of Birth
  </e-actionlist-item>
</e-actionlist>
<e-actionlist height="200px">
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name">
    Last Name
  </e-actionlist-item>
  <e-actionlist-item value="email" disabled>
    Email
  </e-actionlist-item>
  <e-actionlist-item value="address">
    Address
  </e-actionlist-item>
  <e-actionlist-item value="city">
    City
  </e-actionlist-item>
  <e-actionlist-item value="state" selected>
    State
  </e-actionlist-item>
  <e-actionlist-item value="zip-code">
    ZIP Code
  </e-actionlist-item>
  <e-actionlist-item value="phone">
    Phone
  </e-actionlist-item>
  <e-actionlist-item value="mobile">
    Mobile
  </e-actionlist-item>
  <e-actionlist-item value="first-name-of-partner">
    First Name of Partner
  </e-actionlist-item>
  <e-actionlist-item value="anniversary">
    Anniversary
  </e-actionlist-item>
  <e-actionlist-item value="fax">
    Fax
  </e-actionlist-item>
  <e-actionlist-item value="date-of-birth">
    Date of Birth
  </e-actionlist-item>
</e-actionlist>
JavaScript
Copy JavaScript
First NameLast NameEmailAddressCityStateZIP CodePhoneMobileFirst Name of PartnerAnniversaryFaxDate of Birth

Disable min-width
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
disable-min-width

<div style="display: inline-block;">
  <e-actionlist disable-min-width>
    <e-actionlist-item value="1">
      1
    </e-actionlist-item>
    <e-actionlist-item value="2">
      2
    </e-actionlist-item>
    <e-actionlist-item value="3">
      3
    </e-actionlist-item>
    <e-actionlist-item value="4">
      4
    </e-actionlist-item>
    <e-actionlist-item value="5">
      5
    </e-actionlist-item>
  </e-actionlist>
</div>
<div style="display: inline-block;">
  <e-actionlist disable-min-width>
    <e-actionlist-item value="1">
      1
    </e-actionlist-item>
    <e-actionlist-item value="2">
      2
    </e-actionlist-item>
    <e-actionlist-item value="3">
      3
    </e-actionlist-item>
    <e-actionlist-item value="4">
      4
    </e-actionlist-item>
    <e-actionlist-item value="5">
      5
    </e-actionlist-item>
  </e-actionlist>
</div>
JavaScript
Copy JavaScript
12345

Always show search
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
always-show-search

<e-actionlist always-show-search>
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name">
    Last Name
  </e-actionlist-item>
</e-actionlist>
<e-actionlist always-show-search>
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name">
    Last Name
  </e-actionlist-item>
</e-actionlist>
JavaScript
Copy JavaScript
First NameLast Name

Wihtout search
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[search-hidden]

<e-actionlist search-hidden>
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name">
    Last Name
  </e-actionlist-item>
  <e-actionlist-item value="email" disabled>
    Email
  </e-actionlist-item>
  <e-actionlist-item value="address">
    Address
  </e-actionlist-item>
  <e-actionlist-item value="city">
    City
  </e-actionlist-item>
  <e-actionlist-item value="state" selected>
    State
  </e-actionlist-item>
  <e-actionlist-item value="zip-code">
    ZIP Code
  </e-actionlist-item>
  <e-actionlist-item value="phone">
    Phone
  </e-actionlist-item>
  <e-actionlist-item value="mobile">
    Mobile
  </e-actionlist-item>
  <e-actionlist-item value="first-name-of-partner">
    First Name of Partner
  </e-actionlist-item>
  <e-actionlist-item value="anniversary">
    Anniversary
  </e-actionlist-item>
  <e-actionlist-item value="fax">
    Fax
  </e-actionlist-item>
  <e-actionlist-item value="date-of-birth">
    Date of Birth
  </e-actionlist-item>
</e-actionlist>
<e-actionlist search-hidden>
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name">
    Last Name
  </e-actionlist-item>
  <e-actionlist-item value="email" disabled>
    Email
  </e-actionlist-item>
  <e-actionlist-item value="address">
    Address
  </e-actionlist-item>
  <e-actionlist-item value="city">
    City
  </e-actionlist-item>
  <e-actionlist-item value="state" selected>
    State
  </e-actionlist-item>
  <e-actionlist-item value="zip-code">
    ZIP Code
  </e-actionlist-item>
  <e-actionlist-item value="phone">
    Phone
  </e-actionlist-item>
  <e-actionlist-item value="mobile">
    Mobile
  </e-actionlist-item>
  <e-actionlist-item value="first-name-of-partner">
    First Name of Partner
  </e-actionlist-item>
  <e-actionlist-item value="anniversary">
    Anniversary
  </e-actionlist-item>
  <e-actionlist-item value="fax">
    Fax
  </e-actionlist-item>
  <e-actionlist-item value="date-of-birth">
    Date of Birth
  </e-actionlist-item>
</e-actionlist>
JavaScript
Copy JavaScript
First NameLast NameEmailAddressCityStateZIP CodePhoneMobileFirst Name of PartnerAnniversaryFaxDate of Birth

Loading state
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
loading

<e-actionlist loading>
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name">
    Last Name
  </e-actionlist-item>
  <e-actionlist-item value="email" disabled>
    Email
  </e-actionlist-item>
</e-actionlist>
<e-actionlist loading>
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name">
    Last Name
  </e-actionlist-item>
  <e-actionlist-item value="email" disabled>
    Email
  </e-actionlist-item>
</e-actionlist>
JavaScript
Copy JavaScript
First NameLast NameEmail

Empty state text
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
empty-state-text

<e-actionlist always-show-search empty-state-text="Sample text"></e-actionlist>
<e-actionlist always-show-search empty-state-text="Sample text"></e-actionlist>
JavaScript
Copy JavaScript

with options
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
options

<e-actionlist id="optionsExample"></e-actionlist>
<e-actionlist id="optionsExample"></e-actionlist>
JavaScript
Copy JavaScript
document.querySelector('#optionsExample').options = [
  { type: 'item', content: 'simple item 1', value: 'item1' },
  { type: 'group', label: 'group 1', items: [
    { type: 'item', content: 'item 1', value: 'group1item1' }
  ] },
  { type: 'group', label: 'group 2', items: [
    { type: 'item', content: 'item 1', value: 'group2item1' },
    { type: 'item', content: 'item 1', value: 'group2item1', selected: true }
  ] }
];

API Reference e-actionlist

Properties

NameDescriptionTypeRequiredDefault value
multipleActionlist handle multiple selectionbooleanfalse
heightDefines component fixed height. It can be any CSS unit (px, % etc.)stringauto
max-heightDefines component maximum height. It can be any CSS unit (px, % etc.)stringauto
disable-min-widthSets the min-width style of the component to 0booleanfalse
always-show-searchShow search input even if there's not more then 8 optionsbooleanfalse
search-hiddenIf true, search will never appearbooleanfalse
autofocusFocuses the search input, when it becomes visiblebooleanfalse
loadingShows a spinner instead of the content or the empty statebooleanfalse
itemsSet actionlist items[{ type: 'group', content: ' ', value: ' ' }, { type: 'option', content: ' ', value: ' ' }]
empty-state-textString shown when the list is empty and no search keywordstringfalse

Events

EventDescriptionReturns
changeFires on item selection change.{ detail: { value: 'value' } }, or if it is a multiple actionlist: { detail: { value: ['value1', 'value2'] } }

API Reference e-actionlist-item

Properties

NameDescriptionTypeRequiredDefault value
valueDefines the value of the item.stringtext inside the element
selectedDefines the selected value in actionlist.booleanfalse
disabledDefines the disabled state of the item.booleanfalse

API Reference e-actionlist-group

Properties

NameDescriptionTypeRequiredDefault value
labelDefines the group label.string""

Related components

Select

Action List

The Action List component displays a list of related action items, enabling marketers to choose an action in context with immediate effect. For example, picking a personalization token to insert into a text field.

Action items can be filtered, grouped, and have various states (e.g. disabled, or selected).

Structure

Action Lists consist of:

  1. Search field:
    • In its empty state, the placeholder text suggests the ability to filter the list below.
    • When a value is entered, a "clear" action icon is displayed. Clicking this clears the entered value.
  2. List of action items: 2.1. Group separator item (optional):
     - Displays the name of the group.
 - Not actionable.
    2.2. Action item:
     - Displays the name of the action item.
 - Actionable by clicking or by keyboard highlighting.
 - Can have a disabled state, which turns the item not actionable.
 - Can have a selected state, for a currently active item, e.g. when the user is modifying a previously made selection.

Additional design attributes:

  • Action List items should be sorted alphabetically by default.
  • Action List items can only have two levels in hierarchy, i.e. groups cannot be in groups.

Best Practices

Action Lists should:

  • Be in context: users should always know what happens when they select an action item. Context can be implicit (e.g. coming from the page layout or workflow) or explicit (e.g. the action item label describes the action itself).
  • The effect of selecting an action item should be immediate, e.g. inserting a token, proceeding to a new step in the workflow.

Try to avoid:

  • Don't put Action Lists in forms, as item actions should be immediate. For selecting values to be submitted later on, use Select instead.
  • Don't put unrelated, out-of-context items in the same Action List.

Clarified Concepts

  • Select: select a single item from a dropdown list to be submitted later on, usually as part of submitting a form.
  • Multiselect: similar to Select, but users can select multiple items.
  • Dropdown: clicking a dropdown button opens the legacy version of an action list.

Content Guidelines

  • Action items should follow the same content guidelines as Buttons.