Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

Multiselect

Multiselect allows marketers to search and select multiple items from a list of options.

Default

Copy Pug
Copy HTML
Show code
Hide code
e-multiselect

<div class="e-field">
  <label class="e-field__label">
    Multiselect label
  </label>
  <e-multiselect placeholder="Please select an option">
    <e-select-option value="this is option">
      Option 1
    </e-select-option>
    <e-select-option>
      Option 2
    </e-select-option>
    <e-select-option disabled>
      Option 3
    </e-select-option>
    <e-select-option>
      Option 4
    </e-select-option>
    <e-select-option>
      Option 5
    </e-select-option>
    <e-select-option>
      Option 6
    </e-select-option>
    <e-select-option disabled>
      Option 7
    </e-select-option>
    <e-select-option>
      Option 8
    </e-select-option>
  </e-multiselect>
</div>

<div class="e-field"><label class="e-field__label">Multiselect label</label><e-multiselect placeholder="Please select an option"><e-select-option value="this is option">Option 1</e-select-option><e-select-option>Option 2</e-select-option><e-select-option disabled>Option 3</e-select-option><e-select-option>Option 4</e-select-option><e-select-option>Option 5</e-select-option><e-select-option>Option 6</e-select-option><e-select-option disabled>Option 7</e-select-option><e-select-option>Option 8</e-select-option></e-multiselect></div>
Option 1Option 2Option 3Option 4Option 5Option 6Option 7Option 8

Variations

With default selected option
Copy Pug
Copy HTML
Show code
Hide code
e-multiselect

<div class="e-field">
  <label class="e-field__label">
    Default selected
  </label>
  <e-multiselect>
    <e-select-option>
      Option 1
    </e-select-option>
    <e-select-option>
      Option 2
    </e-select-option>
    <e-select-option>
      Option 3
    </e-select-option>
    <e-select-option selected>
      Option 4
    </e-select-option>
    <e-select-option>
      Option 5
    </e-select-option>
    <e-select-option selected>
      Option 6
    </e-select-option>
    <e-select-option disabled>
      Option 7
    </e-select-option>
    <e-select-option>
      Option 8
    </e-select-option>
  </e-multiselect>
</div>

<div class="e-field"><label class="e-field__label">Default selected</label><e-multiselect><e-select-option>Option 1</e-select-option><e-select-option>Option 2</e-select-option><e-select-option>Option 3</e-select-option><e-select-option selected>Option 4</e-select-option><e-select-option>Option 5</e-select-option><e-select-option selected>Option 6</e-select-option><e-select-option disabled>Option 7</e-select-option><e-select-option>Option 8</e-select-option></e-multiselect></div>
Option 1Option 2Option 3Option 4Option 5Option 6Option 7Option 8

With search
Copy Pug
Copy HTML
Show code
Hide code
e-multiselect

<div class="e-field">
  <label class="e-field__label">
    Multiselect label
  </label>
  <e-multiselect placeholder="Please select an option">
    <e-select-option value="this is option" disabled>
      Option 1
    </e-select-option>
    <e-select-option>
      Option 12
    </e-select-option>
    <e-select-option>
      Option 13
    </e-select-option>
    <e-select-option disabled>
      Option 14
    </e-select-option>
    <e-select-option>
      Option 15
    </e-select-option>
    <e-select-option>
      Option 16
    </e-select-option>
    <e-select-option disabled>
      Option 17
    </e-select-option>
    <e-select-option disabled>
      Option 18
    </e-select-option>
    <e-select-option>
      Option 19
    </e-select-option>
    <e-select-option>
      Option 10
    </e-select-option>
  </e-multiselect>
</div>

<div class="e-field"><label class="e-field__label">Multiselect label</label><e-multiselect placeholder="Please select an option"><e-select-option value="this is option" disabled>Option 1</e-select-option><e-select-option>Option 12</e-select-option><e-select-option>Option 13</e-select-option><e-select-option disabled>Option 14</e-select-option><e-select-option>Option 15</e-select-option><e-select-option>Option 16</e-select-option><e-select-option disabled>Option 17</e-select-option><e-select-option disabled>Option 18</e-select-option><e-select-option>Option 19</e-select-option><e-select-option>Option 10</e-select-option></e-multiselect></div>
Option 1Option 12Option 13Option 14Option 15Option 16Option 17Option 18Option 19Option 10

Disabled
Copy Pug
Copy HTML
Show code
Hide code
e-multiselect

<div class="e-field">
  <label class="e-field__label">
    Disabled multiselect label
  </label>
  <e-multiselect disabled>
    <e-select-option>
      Option 1
    </e-select-option>
    <e-select-option selected>
      Option 2
    </e-select-option>
    <e-select-option>
      Option 3
    </e-select-option>
    <e-select-option>
      Option 4
    </e-select-option>
    <e-select-option>
      Option 5
    </e-select-option>
    <e-select-option selected>
      Option 6
    </e-select-option>
    <e-select-option selected>
      Option 7
    </e-select-option>
    <e-select-option>
      Option 8
    </e-select-option>
  </e-multiselect>
</div>

<div class="e-field"><label class="e-field__label">Disabled multiselect label</label><e-multiselect disabled><e-select-option>Option 1</e-select-option><e-select-option selected>Option 2</e-select-option><e-select-option>Option 3</e-select-option><e-select-option>Option 4</e-select-option><e-select-option>Option 5</e-select-option><e-select-option selected>Option 6</e-select-option><e-select-option selected>Option 7</e-select-option><e-select-option>Option 8</e-select-option></e-multiselect></div>
Option 1Option 2Option 3Option 4Option 5Option 6Option 7Option 8

Invalid
Copy Pug
Copy HTML
Show code
Hide code
e-multiselect

<div class="e-field">
  <label class="e-field__label">
    Invalid multiselect label
  </label>
  <e-multiselect invalid>
    <e-select-option>
      Option 1
    </e-select-option>
    <e-select-option>
      Option 2
    </e-select-option>
    <e-select-option>
      Option 3
    </e-select-option>
    <e-select-option selected>
      Option 4
    </e-select-option>
    <e-select-option>
      Option 5
    </e-select-option>
    <e-select-option>
      Option 6
    </e-select-option>
    <e-select-option>
      Option 7
    </e-select-option>
    <e-select-option>
      Option 8
    </e-select-option>
  </e-multiselect>
  <span class="e-field__message e-field__message-error">
    An error occured
  </span>
</div>

<div class="e-field"><label class="e-field__label">Invalid multiselect label</label><e-multiselect invalid><e-select-option>Option 1</e-select-option><e-select-option>Option 2</e-select-option><e-select-option>Option 3</e-select-option><e-select-option selected>Option 4</e-select-option><e-select-option>Option 5</e-select-option><e-select-option>Option 6</e-select-option><e-select-option>Option 7</e-select-option><e-select-option>Option 8</e-select-option></e-multiselect><span class="e-field__message e-field__message-error">An error occured</span></div>
Option 1Option 2Option 3Option 4Option 5Option 6Option 7Option 8An error occured

Native multiselect
Copy Pug
Copy HTML
Show code
Hide code
.e-multiselect

<div class="e-multiselect">
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      AVAILABLE FIELDS
    </div>
    <select class="e-multiselect__select" name="multiselect1" multiple>
      <option value="1">
        Est minim 
      </option>
      <option value="2">
        Lorem anim 
      </option>
      <option value="3">
        Nostrud pariatur 
      </option>
      <option value="4">
        Veniam in 
      </option>
      <option value="5">
        Tempor est 
      </option>
      <option value="6">
        Ad ad 
      </option>
      <option value="7">
        Culpa sit 
      </option>
      <option value="8">
        Quis in 
      </option>
      <option value="9">
        Ut cillum 
      </option>
      <option value="10">
        Ipsum qui 
      </option>
    </select>
  </div>
</div>

<div class="e-multiselect"><div class="e-multiselect__item"><div class="e-multiselect__item__title">AVAILABLE FIELDS</div><select class="e-multiselect__select" name="multiselect1" multiple=""><option value="1">Consectetur veniam </option><option value="2">Elit adipiscing </option><option value="3">Esse adipiscing </option><option value="4">Non anim </option><option value="5">Eiusmod ut </option><option value="6">Ullamco minim </option><option value="7">Consectetur in </option><option value="8">Ex ea </option><option value="9">Id cupidatat </option><option value="10">Ipsum aliqua </option></select></div></div>
AVAILABLE FIELDS

Limited size
Copy Pug
Copy HTML
Show code
Hide code
.e-multiselect-large

<div class="e-multiselect e-multiselect-large">
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      AVAILABLE FIELDS
    </div>
    <select class="e-multiselect__select" name="multiselect2" multiple>
      <option value="1">
        Sunt id 
      </option>
      <option value="2">
        Sint culpa 
      </option>
      <option value="3">
        Esse excepteur 
      </option>
      <option value="4">
        Non ex 
      </option>
      <option value="5">
        Pariatur aute 
      </option>
      <option value="6">
        Excepteur ut 
      </option>
      <option value="7">
        Exercitation nisi 
      </option>
      <option value="8">
        Dolore adipiscing 
      </option>
      <option value="9">
        Proident cillum 
      </option>
      <option value="10">
        Magna et 
      </option>
    </select>
  </div>
</div>

<div class="e-multiselect e-multiselect-large"><div class="e-multiselect__item"><div class="e-multiselect__item__title">AVAILABLE FIELDS</div><select class="e-multiselect__select" name="multiselect2" multiple=""><option value="1">Sit ipsum </option><option value="2">In ut </option><option value="3">Nisi nulla </option><option value="4">Laborum et </option><option value="5">Eiusmod deserunt </option><option value="6">Ut velit </option><option value="7">Culpa occaecat </option><option value="8">Dolor ipsum </option><option value="9">Reprehenderit pariatur </option><option value="10">Adipiscing excepteur </option></select></div></div>
AVAILABLE FIELDS

Empty state
Copy Pug
Copy HTML
Show code
Hide code
.e-multiselect__emptystate

<div class="e-multiselect e-multiselect-large">
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      AVAILABLE FIELDS
    </div>
    <div class="e-multiselect__emptystate">
      No available item
    </div>
  </div>
</div>

<div class="e-multiselect e-multiselect-large"><div class="e-multiselect__item"><div class="e-multiselect__item__title">AVAILABLE FIELDS</div><div class="e-multiselect__emptystate">No available item</div></div></div>
AVAILABLE FIELDS
No available item

Double
Copy Pug
Copy HTML
Show code
Hide code

<div class="e-multiselect">
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      AVAILABLE FIELDS
    </div>
    <select class="e-multiselect__select" name="multiselect2" multiple>
      <option value="1">
        Reprehenderit exercitation 
      </option>
      <option value="2">
        Ex nulla 
      </option>
      <option value="3">
        Eu incididunt 
      </option>
      <option value="4">
        Consectetur eu 
      </option>
      <option value="5">
        Voluptate eiusmod 
      </option>
      <option value="6">
        Sit cillum 
      </option>
      <option value="7">
        Enim occaecat 
      </option>
      <option value="8">
        Nulla est 
      </option>
      <option value="9">
        Sit voluptate 
      </option>
      <option value="10">
        Non ullamco 
      </option>
    </select>
  </div>
  <div class="e-multiselect__buttons">
    <div class="e-btn e-btn-onlyicon" onclick="MoveRight()">
      <e-icon icon="e-angle-double-right"></e-icon>
    </div>
    <div class="e-btn e-btn-onlyicon" onclick="MoveLeft()">
      <e-icon icon="e-angle-double-left"></e-icon>
    </div>
  </div>
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      FIELDS FOR THE EXPORT
    </div>
    <select class="e-multiselect__select" id="chosen_elements" name="chosen_elements" multiple>
      <option value="1">
        Dolor sit 
      </option>
      <option value="2">
        Irure consequat 
      </option>
      <option value="3">
        Ut sit 
      </option>
      <option value="4">
        Dolore minim 
      </option>
      <option value="5">
        Proident consectetur 
      </option>
    </select>
  </div>
</div>

<div class="e-multiselect"><div class="e-multiselect__item"><div class="e-multiselect__item__title">AVAILABLE FIELDS</div><select class="e-multiselect__select" name="multiselect2" multiple=""><option value="1">Ex aute </option><option value="2">Culpa minim </option><option value="3">Exercitation excepteur </option><option value="4">Adipiscing dolore </option><option value="5">Labore exercitation </option><option value="6">Amet reprehenderit </option><option value="7">Duis elit </option><option value="8">Sit veniam </option><option value="9">Dolore adipiscing </option><option value="10">Ut aliquip </option></select></div><div class="e-multiselect__buttons"><div class="e-btn e-btn-onlyicon" onclick="MoveRight()"><e-icon icon="e-angle-double-right"></e-icon></div><div class="e-btn e-btn-onlyicon" onclick="MoveLeft()"><e-icon icon="e-angle-double-left"></e-icon></div></div><div class="e-multiselect__item"><div class="e-multiselect__item__title">FIELDS FOR THE EXPORT</div><select class="e-multiselect__select" id="chosen_elements" name="chosen_elements" multiple=""><option value="1">Non sint </option><option value="2">Exercitation nostrud </option><option value="3">Eiusmod ut </option><option value="4">Sunt aliquip </option><option value="5">Dolor ut </option></select></div></div>
AVAILABLE FIELDS
FIELDS FOR THE EXPORT

API Reference e-multiselect

Properties

NameDescriptionTypeRequiredDefault value
disabledSet disable state of multiselect.booleanfalse
invalidSet disable state of invalid.booleanfalse
placeholderDefines placeholder.string-

Events

EventDescriptionReturns
changeFires on option selection change.{ detail: { selectedOptions: [options] } }

API Reference e-select-option

Properties

NameDescriptionTypeRequiredDefault value
valueDefines option valuestring-
selectedSet option to default selectedbooleanfalse
disabledSet option to disabled.booleanfalse

Related components

Select

Multiselect

Multiselect allows marketers to search and select multiple items from a list of options.

Anatomy

Multiselect structure
  1. Label - Should be clean and concise. Sentence case, no colons.
  2. Tag - Tags display the selected options.
  3. Trigger - The whole select field indicated with white background and the caret works as interaction zone. Clicking it opens the list of options, and also a search input above 8 items.
  4. Search input - Enables searching in the list, even for disabled elements.
  5. List of options - Options predefined by the product should be written in sentence case. Options based on user input - like campaign names, should appear in the list without any additional formatting applied on the string.

Best practices

  • Sort the items in logical order e.g. descending based on date modified. Note that sorting based on alphabetical order hardly works with localisation.
  • Best to use when the amount of options depend on user input. For predefined options with maximum 6 items, consider using Checkboxes instead.
  • For selecting only a single choice from a list of options, use Select or Radio buttons instead.

Grouping

Make specific groups of items visually distinctive by breaking down data into subsections. Titles of these sections appear in smaller, uppercase text and are not selectable.

Multiselect grouping
  1. Category
  2. List item

Avoid adding items to the “Other” category. The existence of this category signals, that further conceptual mapping is required.

Selection

Selected items get a highlighted background and a checkmark icon in the list. At the same time they also appear as tags in the Select component’s field. Tags always appear in chronological order of selection. They can either be removed by clicking on the close icon on the tag, or by clicking on the selected item in the list.

List stored on a server

When list items are stored on a server, use the following simple pattern to prevent performance issues: when the component is focused, ask the user to enter at least 3 adjacent letters. This way the server will only have to return a manageable amount of data.

Multiselect server-side search

If the ‘Recognition rather than recall’ principle is of foremost importance for your product, consult the Frontend team to find an optimal solution.