Examples

Select

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

Default

Copy Pug
Copy HTML
Show code
Hide code
e-select with .e-select

<div class="e-field">
  <label class="e-field__label" for="select1">
    Select label
  </label>
  <e-select>
    <select class="e-select" id="select1">
      <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">
          Alaska
        </option>
        <option value="HI">
          Hawaii
        </option>
      </optgroup>
      <optgroup label="Pacific Time Zone">
        <option value="CA">
          California
        </option>
        <option value="NV">
          Nevada
        </option>
        <option value="OR">
          Oregon
        </option>
        <option value="WA">
          Washington
        </option>
      </optgroup>
      <optgroup label="Mountain Time Zone">
        <option value="AZ">
          Arizona
        </option>
        <option value="CO">
          Colorado
        </option>
        <option value="ID">
          Idaho
        </option>
        <option value="MT">
          Montana
        </option>
        <option value="NE">
          Nebraska
        </option>
        <option value="NM">
          New Mexico
        </option>
        <option value="ND">
          North Dakota
        </option>
        <option value="UT">
          Utah
        </option>
        <option value="WY">
          Wyoming
        </option>
      </optgroup>
      <optgroup label="Central Time Zone">
        <option value="AL">
          Alabama
        </option>
        <option value="AR">
          Arkansas
        </option>
        <option value="IL">
          Illinois
        </option>
        <option value="IA">
          Iowa
        </option>
        <option value="KS">
          Kansas
        </option>
        <option value="KY">
          Kentucky
        </option>
        <option value="LA">
          Louisiana
        </option>
        <option value="MN">
          Minnesota
        </option>
        <option value="MS">
          Mississippi
        </option>
        <option value="MO">
          Missouri
        </option>
        <option value="OK">
          Oklahoma
        </option>
        <option value="SD">
          South Dakota
        </option>
        <option value="TX">
          Texas
        </option>
        <option value="TN">
          Tennessee
        </option>
        <option value="WI">
          Wisconsin
        </option>
      </optgroup>
      <optgroup label="Eastern Time Zone">
        <option value="CT">
          Connecticut
        </option>
        <option value="DE">
          Delaware
        </option>
        <option value="FL">
          Florida
        </option>
        <option value="GA">
          Georgia
        </option>
        <option value="IN">
          Indiana
        </option>
        <option value="ME">
          Maine
        </option>
        <option value="MD">
          Maryland
        </option>
        <option value="MA">
          Massachusetts
        </option>
        <option value="MI">
          Michigan
        </option>
        <option value="NH">
          New Hampshire
        </option>
        <option value="NJ">
          New Jersey
        </option>
        <option value="NY">
          New York
        </option>
        <option value="NC">
          North Carolina
        </option>
        <option value="OH">
          Ohio
        </option>
        <option value="PA">
          Pennsylvania
        </option>
        <option value="RI">
          Rhode Island
        </option>
        <option value="SC">
          South Carolina
        </option>
        <option value="VT">
          Vermont
        </option>
        <option value="VA">
          Virginia
        </option>
        <option value="WV">
          West Virginia
        </option>
      </optgroup>
    </select>
  </e-select>
</div>

<div class="e-field"><label class="e-field__label" for="select1">Select label</label><e-select><select class="e-select" id="select1"><optgroup label="Alaskan/Hawaiian Time Zone"><option value="AK">Alaska</option><option value="HI">Hawaii</option></optgroup><optgroup label="Pacific Time Zone"><option value="CA">California</option><option value="NV">Nevada</option><option value="OR">Oregon</option><option value="WA">Washington</option></optgroup><optgroup label="Mountain Time Zone"><option value="AZ">Arizona</option><option value="CO">Colorado</option><option value="ID">Idaho</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NM">New Mexico</option><option value="ND">North Dakota</option><option value="UT">Utah</option><option value="WY">Wyoming</option></optgroup><optgroup label="Central Time Zone"><option value="AL">Alabama</option><option value="AR">Arkansas</option><option value="IL">Illinois</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="OK">Oklahoma</option><option value="SD">South Dakota</option><option value="TX">Texas</option><option value="TN">Tennessee</option><option value="WI">Wisconsin</option></optgroup><optgroup label="Eastern Time Zone"><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="IN">Indiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="OH">Ohio</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WV">West Virginia</option></optgroup></select></e-select></div>

Select label

Variations

Disabled
Copy Pug
Copy HTML
Show code
Hide code
:disabled

<div class="e-field">
  <label class="e-field__label">
    Select label
  </label>
  <e-select>
    <select class="e-select" disabled>
      <option value="0">
        &nbsp;
      </option>
      <option value="1" selected="selected">
        Ex ea adipiscing 
      </option>
      <option value="2" disabled="disabled">
        Dolore nostrud cupidatat 
      </option>
      <option value="3">
        Sed aliqua in 
      </option>
      <option value="4">
        Aliquip magna qui 
      </option>
      <option value="5">
        Ex dolor eiusmod 
      </option>
      <option value="6">
        Sit laboris aute 
      </option>
      <option value="7">
        Sint dolore dolor 
      </option>
      <option value="8">
        Consequat esse lorem 
      </option>
      <option value="9">
        Velit velit dolor 
      </option>
    </select>
  </e-select>
</div>

<div class="e-field"><label class="e-field__label">Select label</label><e-select><select class="e-select" disabled><option value="0">&nbsp;</option><option value="1" selected="selected">Fugiat nisi ut </option><option value="2" disabled="disabled">Veniam consectetur exercitation </option><option value="3">Voluptate labore nostrud </option><option value="4">Nostrud nostrud lorem </option><option value="5">Quis velit do </option><option value="6">Dolor lorem reprehenderit </option><option value="7">Quis lorem nulla </option><option value="8">Commodo est do </option><option value="9">Consequat deserunt eiusmod </option></select></e-select></div>

Select label

Readonly
Copy Pug
Copy HTML
Show code
Hide code
:readonly

<div class="e-field">
  <label class="e-field__label">
    Select label
  </label>
  <e-select readonly>
    <select class="e-select">
      <option value="0">
        &nbsp;
      </option>
      <option value="1" selected="selected">
        Commodo cillum culpa 
      </option>
      <option value="2" disabled="disabled">
        Dolore esse elit 
      </option>
      <option value="3">
        Dolor culpa ipsum 
      </option>
      <option value="4">
        Id exercitation sed 
      </option>
      <option value="5">
        Culpa aliqua officia 
      </option>
      <option value="6">
        Quis ex laborum 
      </option>
      <option value="7">
        Ex reprehenderit aliqua 
      </option>
      <option value="8">
        Qui ut dolore 
      </option>
      <option value="9">
        Sit eiusmod mollit 
      </option>
    </select>
  </e-select>
</div>

<div class="e-field"><label class="e-field__label">Select label</label><e-select readonly><select class="e-select"><option value="0">&nbsp;</option><option value="1" selected="selected">Eu anim laboris </option><option value="2" disabled="disabled">Ut velit et </option><option value="3">Duis esse excepteur </option><option value="4">Esse nostrud cillum </option><option value="5">Excepteur est irure </option><option value="6">Qui nulla dolor </option><option value="7">Laborum ullamco occaecat </option><option value="8">Amet nostrud exercitation </option><option value="9">Fugiat ut officia </option></select></e-select></div>

Select label

Error
Copy Pug
Copy HTML
Show code
Hide code
e-select-error

<div class="e-field">
  <label class="e-field__label">
    Select label
  </label>
  <e-select>
    <select class="e-select e-select-error">
      <option value="0">
        &nbsp;
      </option>
      <option value="1" selected="selected">
        Ipsum mollit aute 
      </option>
      <option value="2" disabled="disabled">
        Aliquip esse cillum 
      </option>
      <option value="3">
        Culpa ut do 
      </option>
      <option value="4">
        Quis anim amet 
      </option>
      <option value="5">
        Laborum sunt sunt 
      </option>
      <option value="6">
        Elit dolor nostrud 
      </option>
      <option value="7">
        Minim nulla aliqua 
      </option>
      <option value="8">
        Exercitation magna nostrud 
      </option>
      <option value="9">
        Eiusmod in sunt 
      </option>
    </select>
  </e-select>
  <span class="e-field__message e-field__message-error">
    An error occured
  </span>
</div>

<div class="e-field"><label class="e-field__label">Select label</label><e-select><select class="e-select e-select-error"><option value="0">&nbsp;</option><option value="1" selected="selected">Culpa cillum reprehenderit </option><option value="2" disabled="disabled">Tempor amet ex </option><option value="3">Anim nulla in </option><option value="4">Velit ex esse </option><option value="5">Consequat qui sunt </option><option value="6">Aliqua est in </option><option value="7">Incididunt ad reprehenderit </option><option value="8">Anim fugiat officia </option><option value="9">In dolor enim </option></select></e-select><span class="e-field__message e-field__message-error">An error occured</span></div>

Select label

An error occured

Inline in text
Copy Pug
Copy HTML
Show code
Hide code
.e-select-inline

<div class="e-field">
  <label class="e-field__label" for="select3">
    Select label
  </label>
  <e-select>
    <select class="e-select e-select-inline" id="select3">
      <option value="0">
        &nbsp;
      </option>
      <option value="1" selected="selected">
        Esse ad commodo 
      </option>
      <option value="2" disabled="disabled">
        Dolore ut velit 
      </option>
      <option value="3">
        In irure dolor 
      </option>
      <option value="4">
        Sint dolore pariatur 
      </option>
    </select>
  </e-select>
</div>

<div class="e-field"><label class="e-field__label" for="select3">Select label</label><e-select><select class="e-select e-select-inline" id="select3"><option value="0">&nbsp;</option><option value="1" selected="selected">Consectetur anim in </option><option value="2" disabled="disabled">Id voluptate eu </option><option value="3">Sit irure enim </option><option value="4">Ut velit incididunt </option></select></e-select></div>

Select label

Inline with button
Copy Pug
Copy HTML
Show code
Hide code

<div class="e-field">
  <label class="e-field__label" for="select3">
    Select label
  </label>
  <e-select>
    <select class="e-select e-select-inline" id="select3">
      <option value="0">
        &nbsp;
      </option>
      <option value="1" selected="selected">
        Nisi fugiat aute 
      </option>
      <option value="2" disabled="disabled">
        Commodo do aliquip 
      </option>
      <option value="3">
        Anim lorem fugiat 
      </option>
      <option value="4">
        Sit enim sint 
      </option>
    </select>
  </e-select>
  <button class="e-btn">
    Sample Button
  </button>
</div>

<div class="e-field"><label class="e-field__label" for="select3">Select label</label><e-select><select class="e-select e-select-inline" id="select3"><option value="0">&nbsp;</option><option value="1" selected="selected">Ut do proident </option><option value="2" disabled="disabled">Dolore quis cupidatat </option><option value="3">Ex voluptate do </option><option value="4">Magna dolor in </option></select></e-select><button class="e-btn">Sample Button</button></div>

Select label

Small
Copy Pug
Copy HTML
Show code
Hide code
.e-select-small

<div class="e-field">
  <label class="e-field__label" for="selectvar">
    Select label
  </label>
  <e-select>
    <select class="e-select e-select-small" id="selectvar">
      <option value="0">
        &nbsp;
      </option>
      <option value="1" selected="selected">
        Adipiscing aute exercitation 
      </option>
      <option value="2" disabled="disabled">
        Id deserunt ut 
      </option>
      <option value="3">
        Cupidatat laboris nulla 
      </option>
      <option value="4">
        Aute proident ut 
      </option>
    </select>
  </e-select>
</div>

<div class="e-field"><label class="e-field__label" for="selectvar">Select label</label><e-select><select class="e-select e-select-small" id="selectvar"><option value="0">&nbsp;</option><option value="1" selected="selected">Commodo dolore exercitation </option><option value="2" disabled="disabled">Laborum fugiat exercitation </option><option value="3">Exercitation sint exercitation </option><option value="4">Voluptate eu anim </option></select></e-select></div>

Select label

Medium
Copy Pug
Copy HTML
Show code
Hide code
.e-select-medium

<div class="e-field">
  <label class="e-field__label" for="selectvar">
    Select label
  </label>
  <e-select>
    <select class="e-select e-select-medium" id="selectvar">
      <option value="0">
        &nbsp;
      </option>
      <option value="1" selected="selected">
        Irure ullamco nostrud 
      </option>
      <option value="2" disabled="disabled">
        Aute in esse 
      </option>
      <option value="3">
        Excepteur incididunt proident 
      </option>
      <option value="4">
        Ea aute id 
      </option>
    </select>
  </e-select>
</div>

<div class="e-field"><label class="e-field__label" for="selectvar">Select label</label><e-select><select class="e-select e-select-medium" id="selectvar"><option value="0">&nbsp;</option><option value="1" selected="selected">Aliquip esse in </option><option value="2" disabled="disabled">Cupidatat sit occaecat </option><option value="3">Incididunt nostrud amet </option><option value="4">Tempor aliquip id </option></select></e-select></div>

Select label

Large
Copy Pug
Copy HTML
Show code
Hide code
.e-select-large

<div class="e-field">
  <label class="e-field__label" for="selectvar">
    Select label
  </label>
  <e-select>
    <select class="e-select e-select-large" id="selectvar">
      <option value="0">
        &nbsp;
      </option>
      <option value="1" selected="selected">
        Eu proident esse 
      </option>
      <option value="2" disabled="disabled">
        Mollit id est 
      </option>
      <option value="3">
        Ut dolore est 
      </option>
      <option value="4">
        Ut fugiat occaecat 
      </option>
    </select>
  </e-select>
</div>

<div class="e-field"><label class="e-field__label" for="selectvar">Select label</label><e-select><select class="e-select e-select-large" id="selectvar"><option value="0">&nbsp;</option><option value="1" selected="selected">Ad et duis </option><option value="2" disabled="disabled">Sunt in amet </option><option value="3">Esse eu veniam </option><option value="4">Qui consectetur ea </option></select></e-select></div>

Select label

Disable min width
Copy Pug
Copy HTML
Show code
Hide code
disable-min-width

<div class="e-field">
  <label class="e-field__label" for="select4">
    Select label
  </label>
  <e-select disable-min-width="true">
    <select class="e-select e-select-small" id="select4">
      <option value="1">
        1
      </option>
      <option value="2">
        2
      </option>
      <option value="3">
        3
      </option>
      <option value="4">
        4
      </option>
    </select>
  </e-select>
</div>

<div class="e-field"><label class="e-field__label" for="select4">Select label</label><e-select disable-min-width="true"><select class="e-select e-select-small" id="select4"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></e-select></div>

Select label

Angular
Copy Pug
Copy HTML
Show code
Hide code
1.5.5

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app>
  <div ng-init="data = { availableOptions: [ {id: '1', name: 'Option A'}, {id: '2', name: 'Option B'}, {id: '3', name: 'Option C'} ], selectedOption: {id: '3', name: 'Option C'} }"></div>
  <div class="e-field">
    <label class="e-field__label" for="input2">
      Select label&nbsp;
      <span class="text-size-small">
        {{ data.selectedOption }}
      </span>
    </label>
    <e-select>
      <select class="e-select" name="Select" id="mySelect" ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption"></select>
    </e-select>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script><div ng-app><div ng-init="data = { availableOptions: [ {id: '1', name: 'Option A'}, {id: '2', name: 'Option B'}, {id: '3', name: 'Option C'} ], selectedOption: {id: '3', name: 'Option C'} }"></div><div class="e-field"><label class="e-field__label" for="input2">Select label&nbsp;<span class="text-size-small">{{ data.selectedOption }}</span></label><e-select><select class="e-select" name="Select" id="mySelect" ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption"></select></e-select></div></div>

Select label {{ data.selectedOption }}

API Reference

Properties

Name	Description	Type	Required	Default value
disable-min-width	If it's true, then dropdown will has the same width as select	boolean		false

Events

Event	Description	Returns
`close`	Fires when the component is closed	`{ detail: { value: [value of select] } }`

Related components

Multiselect

Select

Default

Copy PugCopy HTMLShow codeHide codee-select with .e-select

Variations

DisabledCopy PugCopy HTMLShow codeHide code:disabled

ReadonlyCopy PugCopy HTMLShow codeHide code:readonly

ErrorCopy PugCopy HTMLShow codeHide codee-select-error

Inline in textCopy PugCopy HTMLShow codeHide code.e-select-inline

Inline with buttonCopy PugCopy HTMLShow codeHide code

SmallCopy PugCopy HTMLShow codeHide code.e-select-small

MediumCopy PugCopy HTMLShow codeHide code.e-select-medium

LargeCopy PugCopy HTMLShow codeHide code.e-select-large

Disable min widthCopy PugCopy HTMLShow codeHide codedisable-min-width

AngularCopy PugCopy HTMLShow codeHide code1.5.5

API Reference

Properties

Events

Related components

Copy Pug
Copy HTML
Show code
Hide code
e-select with .e-select

Disabled
Copy Pug
Copy HTML
Show code
Hide code
:disabled

Readonly
Copy Pug
Copy HTML
Show code
Hide code
:readonly

Error
Copy Pug
Copy HTML
Show code
Hide code
e-select-error

Inline in text
Copy Pug
Copy HTML
Show code
Hide code
.e-select-inline

Inline with button
Copy Pug
Copy HTML
Show code
Hide code

Small
Copy Pug
Copy HTML
Show code
Hide code
.e-select-small

Medium
Copy Pug
Copy HTML
Show code
Hide code
.e-select-medium

Large
Copy Pug
Copy HTML
Show code
Hide code
.e-select-large

Disable min width
Copy Pug
Copy HTML
Show code
Hide code
disable-min-width

Angular
Copy Pug
Copy HTML
Show code
Hide code
1.5.5