Select

<div class="ecl-form-group"><label for="select-default" class="ecl-form-label">Select a country<span
      class="ecl-form-label__required">*</span></label>
  <div class="ecl-help-block">This is the input&#x27;s helper text.</div>
  <div class="ecl-select__container ecl-select__container--m"><select class="ecl-select" id="select-default"
      required="">
      <optgroup label="European countries">
        <option value="1">Belgium</option>
        <option value="2">France</option>
        <option value="3" disabled="">Luxembourg</option>
        <option value="4">Germany</option>
        <option value="5" selected="">Bulgaria</option>
        <option value="6">Italy</option>
        <option value="7">Romania</option>
        <option value="8">Greece</option>
        <option value="9">Hungary</option>
        <option value="10">Portugal</option>
      </optgroup>
      <optgroup label="Non European countries">
        <option value="11">China</option>
      </optgroup>
      <option value="12">standalone option</option>
    </select>
    <div class="ecl-select__icon"><svg class="ecl-icon ecl-icon--s ecl-icon--rotate-180 ecl-select__icon-shape"
        focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
      </svg></div>
  </div>
</div>

<div class="ecl-form-group"><label for="select-multiple" class="ecl-form-label">Select a country<span
      class="ecl-form-label__required">*</span></label>
  <div class="ecl-help-block">This is the helper text.</div>
  <div class="ecl-select__container ecl-select__container--m"><select class="ecl-select" id="select-multiple"
      required="" multiple="" data-ecl-auto-init="Select" data-ecl-select-multiple=""
      data-ecl-select-default="Select an item" data-ecl-select-search="Enter keyword"
      data-ecl-select-no-results="No results found" data-ecl-select-all="Select all"
      data-ecl-select-clear-all="Clear all" data-ecl-select-close="Close">
      <optgroup label="European countries">
        <option value="1">Belgium</option>
        <option value="2">France</option>
        <option value="3" disabled="">Luxembourg</option>
        <option value="4">Germany</option>
        <option value="5">Bulgaria</option>
        <option value="6">Italy</option>
        <option value="7">Romania</option>
        <option value="8">Greece</option>
        <option value="9">Hungary</option>
        <option value="10">Portugal</option>
      </optgroup>
      <optgroup label="Non European countries">
        <option value="11">China</option>
      </optgroup>
      <option value="12">standalone option</option>
    </select>
    <div class="ecl-select__icon"><svg class="ecl-icon ecl-icon--s ecl-icon--rotate-180 ecl-select__icon-shape"
        focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
      </svg></div>
  </div>
</div>