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

Select

Select provides single-selection functionality with the added benefit of Emarsys styling and live search.

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<e-select id="select1" placeholder="Please select one option">
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2">
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
  <e-select-option value="option_4" selected>
    Option 4
  </e-select-option>
  <e-select-option value="option_5">
    Option 5
  </e-select-option>
  <e-select-option value="option_6">
    Option 6
  </e-select-option>
  <e-select-option value="option_7" disabled>
    Option 7
  </e-select-option>
  <e-select-option value="option_8">
    Option 8
  </e-select-option>
</e-select>
<e-select id="select1" placeholder="Please select one option">
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2">
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
  <e-select-option value="option_4" selected>
    Option 4
  </e-select-option>
  <e-select-option value="option_5">
    Option 5
  </e-select-option>
  <e-select-option value="option_6">
    Option 6
  </e-select-option>
  <e-select-option value="option_7" disabled>
    Option 7
  </e-select-option>
  <e-select-option value="option_8">
    Option 8
  </e-select-option>
</e-select>
JavaScript
Copy JavaScript
Option 1Option 2Option 3Option 4Option 5Option 6Option 7Option 8

Variations

With search
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
Search input appears automatically if select contains more than 8 option

<e-select id="select2" placeholder="Please select one option">
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2">
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
  <e-select-option value="option_4" selected>
    Option 4
  </e-select-option>
  <e-select-option value="option_5">
    Option 5
  </e-select-option>
  <e-select-option value="option_6">
    Option 6
  </e-select-option>
  <e-select-option value="option_7" disabled>
    Option 7
  </e-select-option>
  <e-select-option value="option_8">
    Option 8
  </e-select-option>
  <e-select-option value="option_9">
    Option 9
  </e-select-option>
</e-select>
<e-select id="select2" placeholder="Please select one option">
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2">
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
  <e-select-option value="option_4" selected>
    Option 4
  </e-select-option>
  <e-select-option value="option_5">
    Option 5
  </e-select-option>
  <e-select-option value="option_6">
    Option 6
  </e-select-option>
  <e-select-option value="option_7" disabled>
    Option 7
  </e-select-option>
  <e-select-option value="option_8">
    Option 8
  </e-select-option>
  <e-select-option value="option_9">
    Option 9
  </e-select-option>
</e-select>
JavaScript
Copy JavaScript
Option 1Option 2Option 3Option 4Option 5Option 6Option 7Option 8Option 9

With placeholder
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<e-select id="select21" placeholder="Please select one option">
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2">
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
  <e-select-option value="option_4">
    Option 4
  </e-select-option>
  <e-select-option value="option_5">
    Option 5
  </e-select-option>
  <e-select-option value="option_6">
    Option 6
  </e-select-option>
  <e-select-option value="option_7">
    Option 7
  </e-select-option>
  <e-select-option value="option_8">
    Option 8
  </e-select-option>
  <e-select-option value="option_9">
    Option 9
  </e-select-option>
</e-select>
<e-select id="select21" placeholder="Please select one option">
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2">
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
  <e-select-option value="option_4">
    Option 4
  </e-select-option>
  <e-select-option value="option_5">
    Option 5
  </e-select-option>
  <e-select-option value="option_6">
    Option 6
  </e-select-option>
  <e-select-option value="option_7">
    Option 7
  </e-select-option>
  <e-select-option value="option_8">
    Option 8
  </e-select-option>
  <e-select-option value="option_9">
    Option 9
  </e-select-option>
</e-select>
JavaScript
Copy JavaScript
Option 1Option 2Option 3Option 4Option 5Option 6Option 7Option 8Option 9

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

<e-select id="select3" placeholder="Please select one option">
  <e-select-group label="Group 01">
    <e-select-option value="option_1">
      Option 1
    </e-select-option>
    <e-select-option value="option_2">
      Option 2
    </e-select-option>
    <e-select-option value="option_3">
      Option 3
    </e-select-option>
    <e-select-option value="option_4" selected>
      Option 4
    </e-select-option>
    <e-select-option value="option_5">
      Option 5
    </e-select-option>
  </e-select-group>
  <e-select-group label="Group 02">
    <e-select-option value="option_6">
      Option 6
    </e-select-option>
    <e-select-option value="option_7" disabled>
      Option 7
    </e-select-option>
    <e-select-option value="option_8">
      Option 8
    </e-select-option>
    <e-select-option value="option_9">
      Option 9
    </e-select-option>
  </e-select-group>
</e-select>
<e-select id="select3" placeholder="Please select one option">
  <e-select-group label="Group 01">
    <e-select-option value="option_1">
      Option 1
    </e-select-option>
    <e-select-option value="option_2">
      Option 2
    </e-select-option>
    <e-select-option value="option_3">
      Option 3
    </e-select-option>
    <e-select-option value="option_4" selected>
      Option 4
    </e-select-option>
    <e-select-option value="option_5">
      Option 5
    </e-select-option>
  </e-select-group>
  <e-select-group label="Group 02">
    <e-select-option value="option_6">
      Option 6
    </e-select-option>
    <e-select-option value="option_7" disabled>
      Option 7
    </e-select-option>
    <e-select-option value="option_8">
      Option 8
    </e-select-option>
    <e-select-option value="option_9">
      Option 9
    </e-select-option>
  </e-select-group>
</e-select>
JavaScript
Copy JavaScript
Option 1Option 2Option 3Option 4Option 5Option 6Option 7Option 8Option 9

Disabled
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
disabled

<e-select id="select4" disabled>
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2" selected>
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
<e-select id="select4" disabled>
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2" selected>
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
JavaScript
Copy JavaScript
Option 1Option 2Option 3

Readonly
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
readonly

<e-select id="select5" readonly>
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2" selected>
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
<e-select id="select5" readonly>
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2" selected>
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
JavaScript
Copy JavaScript
Option 1Option 2Option 3

Inline
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
inline

<e-select inline>
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2" selected>
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
<e-select inline>
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2" selected>
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
JavaScript
Copy JavaScript
Option 1Option 2Option 3

Borderless
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
borderless

<e-select borderless>
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2" selected>
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
<e-select borderless>
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2" selected>
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
JavaScript
Copy JavaScript
Option 1Option 2Option 3

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

<e-select inline disable-min-width>
  <e-select-option value="option_1">
    1
  </e-select-option>
  <e-select-option value="option_2">
    2
  </e-select-option>
  <e-select-option value="option_3">
    3
  </e-select-option>
  <e-select-option value="option_4">
    4
  </e-select-option>
</e-select>
<e-select inline disable-min-width>
  <e-select-option value="option_1">
    1
  </e-select-option>
  <e-select-option value="option_2">
    2
  </e-select-option>
  <e-select-option value="option_3">
    3
  </e-select-option>
  <e-select-option value="option_4">
    4
  </e-select-option>
</e-select>
JavaScript
Copy JavaScript
1234

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

<e-select id="select6" always-show-search>
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2">
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
<e-select id="select6" always-show-search>
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2">
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
JavaScript
Copy JavaScript
Option 1Option 2Option 3

Size
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
size

<e-select size="small">
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2" selected>
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
<e-select size="medium">
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2" selected>
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
<e-select size="large">
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2" selected>
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
<e-select size="small">
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2" selected>
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
<e-select size="medium">
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2" selected>
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
<e-select size="large">
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2" selected>
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
JavaScript
Copy JavaScript
Option 1Option 2Option 3Option 1Option 2Option 3Option 1Option 2Option 3

Error
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
error

<e-select id="select7" error>
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2" selected>
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
<e-select id="select7" error>
  <e-select-option value="option_1">
    Option 1
  </e-select-option>
  <e-select-option value="option_2" selected>
    Option 2
  </e-select-option>
  <e-select-option value="option_3">
    Option 3
  </e-select-option>
</e-select>
JavaScript
Copy JavaScript
Option 1Option 2Option 3

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

<e-select id="select8" loading always-show-search></e-select>
<e-select id="select8" loading always-show-search></e-select>
JavaScript
Copy JavaScript

Items setter
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
items

<e-select id="optionsExample"></e-select>
<e-select id="optionsExample"></e-select>
JavaScript
Copy JavaScript
document.querySelector('#optionsExample').items = [
  { type: 'option', content: 'simple option 1', value: 'option1' },
  { type: 'group', label: 'group 1', items: [
    { type: 'option', content: 'option 2', value: 'group1option2' }
  ] },
  { type: 'group', label: 'group 2', items: [
    { type: 'option', content: 'option 3', value: 'group2option3' },
    { type: 'option', content: 'option 4', value: 'group2item4', selected: true }
  ] }
];

API Reference

Properties

NameDescriptionTypeRequiredDefault value
itemsSet select optionsarray
placeholderDefines the select placeholder if none of the options is selectedstring
disabledSets disabled statebooleanfalse
readonlySets readonly statebooleanfalse
inlineShows select as inline blockbooleanfalse
sizeRenders select in given sizesmall/medium/large
borderlessRenders borderless selectbooleanfalse
disable-min-widthSets the min-width style of the component to 0booleanfalse
always-show-searchShow search input ven if there's not more then 8 optionsbooleanfalse
tabindexChanges tabindex of componentnumber0
errorSets error state of componentbooleanfalse
nameDefines name for submitting valuestring
loadingSets loading state of the action listbooleanfalse

Events

EventDescriptionReturns
changeFires on item selection change.Change event
searchFires on input in search field.{ detail: { value: [value] } }
closeFires on dropdown close.

Related components

MultiselectAction List