Select

Default .e-select

<div class="e-field">
  <label for="select1" class="e-field__label">
    Select label
  </label>
  <select id="select1" class="e-select">
    <option value="0">
      &nbsp;
    </option>
    <option value="1" selected="selected">
      Culpa aute occaecat 
    </option>
    <option value="2" disabled="disabled">
      Est magna in 
    </option>
    <option value="3">
      Do duis nostrud 
    </option>
    <option value="4">
      Aliqua ut enim 
    </option>
  </select>
</div>

                        <div class="e-field">
                          <label for="select1" class="e-field__label">Select label</label>
                          <select id="select1" class="e-select">
                            <option value="0">&nbsp;</option>
                            <option value="1" selected="selected">Deserunt cupidatat est 
                            </option>
                            <option value="2" disabled="disabled">Nulla culpa fugiat 
                            </option>
                            <option value="3">Tempor ut adipiscing 
                            </option>
                            <option value="4">Id esse magna 
                            </option>
                          </select>
                        </div>

Variations

Disabled :disabled

<div class="e-field">
  <label class="e-field__label">
    Select label
  </label>
  <select disabled class="e-select">
    <option value="0">
      &nbsp;
    </option>
    <option value="1" selected="selected">
      Ut consectetur est 
    </option>
    <option value="2" disabled="disabled">
      Esse cupidatat officia 
    </option>
    <option value="3">
      Et nisi minim 
    </option>
    <option value="4">
      Sint cupidatat proident 
    </option>
    <option value="5">
      Ea dolore enim 
    </option>
    <option value="6">
      Velit elit dolore 
    </option>
    <option value="7">
      Ut eu sed 
    </option>
    <option value="8">
      Dolore anim nisi 
    </option>
    <option value="9">
      Sed sunt sunt 
    </option>
  </select>
</div>

                          <div class="e-field">
                            <label class="e-field__label">Select label</label>
                            <select disabled class="e-select">
                              <option value="0">&nbsp;</option>
                              <option value="1" selected="selected">Irure in sit 
                              </option>
                              <option value="2" disabled="disabled">Deserunt laboris ut 
                              </option>
                              <option value="3">Irure ut dolore 
                              </option>
                              <option value="4">Deserunt amet velit 
                              </option>
                              <option value="5">Aliquip velit sunt 
                              </option>
                              <option value="6">Esse ipsum qui 
                              </option>
                              <option value="7">Dolor nostrud et 
                              </option>
                              <option value="8">Aute in deserunt 
                              </option>
                              <option value="9">Deserunt ex adipiscing 
                              </option>
                            </select>
                          </div>

Select2 .e-select__select2

<div class="e-field">
  <label for="select2" class="e-field__label">
    Select label
  </label>
  <select id="select2" class="e-select e-select__select2">
    <option value="0">
      &nbsp;
    </option>
    <option value="1" selected="selected">
      Sit aliquip amet 
    </option>
    <option value="2" disabled="disabled">
      Irure qui esse 
    </option>
    <option value="3">
      Exercitation commodo do 
    </option>
    <option value="4">
      Excepteur sit in 
    </option>
    <option value="5">
      In nostrud nisi 
    </option>
    <option value="6">
      Ut laborum ipsum 
    </option>
    <option value="7">
      Ullamco incididunt laborum 
    </option>
    <option value="8">
      Enim veniam sunt 
    </option>
    <option value="9">
      Sunt consectetur laborum 
    </option>
  </select>
</div>

                          <div class="e-field">
                            <label for="select2" class="e-field__label">Select label</label>
                            <select id="select2" class="e-select e-select__select2">
                              <option value="0">&nbsp;</option>
                              <option value="1" selected="selected">Dolore anim ullamco 
                              </option>
                              <option value="2" disabled="disabled">Irure est ea 
                              </option>
                              <option value="3">Voluptate consequat amet 
                              </option>
                              <option value="4">Voluptate exercitation eiusmod 
                              </option>
                              <option value="5">Deserunt exercitation deserunt 
                              </option>
                              <option value="6">Enim reprehenderit ex 
                              </option>
                              <option value="7">Ut do amet 
                              </option>
                              <option value="8">In ut do 
                              </option>
                              <option value="9">Dolor duis incididunt 
                              </option>
                            </select>
                          </div>

Inline .e-select-inline

<div class="e-field">
  <label for="select3" class="e-field__label">
    Select label
  </label>
  <select id="select3" class="e-select e-select-inline">
    <option value="0">
      &nbsp;
    </option>
    <option value="1" selected="selected">
      Fugiat reprehenderit esse 
    </option>
    <option value="2" disabled="disabled">
      Consectetur sed non 
    </option>
    <option value="3">
      Reprehenderit dolor amet 
    </option>
    <option value="4">
      Ut nisi est 
    </option>
  </select>
</div>

                          <div class="e-field">
                            <label for="select3" class="e-field__label">Select label</label>
                            <select id="select3" class="e-select e-select-inline">
                              <option value="0">&nbsp;</option>
                              <option value="1" selected="selected">Reprehenderit enim fugiat 
                              </option>
                              <option value="2" disabled="disabled">Eu enim ea 
                              </option>
                              <option value="3">Dolore ea cupidatat 
                              </option>
                              <option value="4">Elit tempor tempor 
                              </option>
                            </select>
                          </div>

Small .e-select-small

<div class="e-field">
  <label for="selectvar" class="e-field__label">
    Select label
  </label>
  <select id="selectvar" class="e-select e-select-small">
    <option value="0">
      &nbsp;
    </option>
    <option value="1" selected="selected">
      Incididunt id sit 
    </option>
    <option value="2" disabled="disabled">
      Culpa occaecat exercitation 
    </option>
    <option value="3">
      Do mollit ut 
    </option>
    <option value="4">
      Aute et amet 
    </option>
  </select>
</div>

                          <div class="e-field">
                            <label for="selectvar" class="e-field__label">Select label</label>
                            <select id="selectvar" class="e-select e-select-small">
                              <option value="0">&nbsp;</option>
                              <option value="1" selected="selected">Irure dolore quis 
                              </option>
                              <option value="2" disabled="disabled">Ut amet et 
                              </option>
                              <option value="3">Incididunt excepteur ex 
                              </option>
                              <option value="4">Anim quis qui 
                              </option>
                            </select>
                          </div>

Medium .e-select-medium

<div class="e-field">
  <label for="selectvar" class="e-field__label">
    Select label
  </label>
  <select id="selectvar" class="e-select e-select-medium">
    <option value="0">
      &nbsp;
    </option>
    <option value="1" selected="selected">
      Eu eiusmod lorem 
    </option>
    <option value="2" disabled="disabled">
      Ipsum nostrud magna 
    </option>
    <option value="3">
      Ea quis nulla 
    </option>
    <option value="4">
      Et enim in 
    </option>
  </select>
</div>

                          <div class="e-field">
                            <label for="selectvar" class="e-field__label">Select label</label>
                            <select id="selectvar" class="e-select e-select-medium">
                              <option value="0">&nbsp;</option>
                              <option value="1" selected="selected">Et esse eiusmod 
                              </option>
                              <option value="2" disabled="disabled">Ea lorem sunt 
                              </option>
                              <option value="3">In laborum aliqua 
                              </option>
                              <option value="4">Consectetur officia irure 
                              </option>
                            </select>
                          </div>

Large .e-select-large

<div class="e-field">
  <label for="selectvar" class="e-field__label">
    Select label
  </label>
  <select id="selectvar" class="e-select e-select-large">
    <option value="0">
      &nbsp;
    </option>
    <option value="1" selected="selected">
      Occaecat duis nulla 
    </option>
    <option value="2" disabled="disabled">
      Nisi deserunt reprehenderit 
    </option>
    <option value="3">
      Laboris anim id 
    </option>
    <option value="4">
      Eiusmod do magna 
    </option>
  </select>
</div>

                          <div class="e-field">
                            <label for="selectvar" class="e-field__label">Select label</label>
                            <select id="selectvar" class="e-select e-select-large">
                              <option value="0">&nbsp;</option>
                              <option value="1" selected="selected">Ut nisi veniam 
                              </option>
                              <option value="2" disabled="disabled">Quis aliqua ut 
                              </option>
                              <option value="3">Consequat commodo nulla 
                              </option>
                              <option value="4">Est nostrud enim 
                              </option>
                            </select>
                          </div>

Related components

Multiselect

Select and select2

In order to use the select2 components, you have to include select2 javascript and css (version 3.5.3) to your page. You can download it from here: http://select2.github.io/select2/

Last update

Message feat(components): use stylelint rules
Date:
()
Committer: rudywaltz
Component history