Select Examples
e-select
<e-select id="select1" placeholder="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>Search displayed when select contains more than 8 options.
<e-select id="select1" placeholder="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-option value="option_10">
Option 10
</e-select-option>
</e-select>[placeholder]
<e-select id="select1" placeholder="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-option value="option_10">
Option 10
</e-select-option>
</e-select>e-select-group
<e-select id="select1" placeholder="Select One Option">
<e-select-group label="Group One">
<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 Two">
<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>[disabled]
<e-select id="select1" 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>[readonly]
<e-select id="select1" 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>[clear-visible]
<e-select id="select1" placeholder="Select One Option" clear-visible>
<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>[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>[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>[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>[always-show-search]
<e-select id="select1" 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>[size=small|medium|large]
<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>[error]
<e-select id="select1" 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>[loading]
<e-select id="select8" loading always-show-search></e-select>[items]
<e-select id="optionsExample"></e-select>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 }
] }
];