Select

<div class="ecl-form-group"><label for="select-default" id="select-default-label" class="ecl-form-label">Select a
    country<span class="ecl-form-label__required" role="note" aria-label="required">*</span></label>
  <div class="ecl-help-block" id="select-default-helper">This is the input's helper text.</div>
  <div class="ecl-select__container ecl-select__container--m"><select class="ecl-select" id="select-default"
      name="country" aria-label="country" required aria-describedby="select-default-helper" data-ecl-auto-init="Select">
      <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"><button class="ecl-button ecl-button--ghost ecl-button--icon-only" type="button"
        tabindex="-1"><span class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Toggle
            dropdown</span><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 ecl-button__icon" focusable="false"
            aria-hidden="true" data-ecl-icon>
            <use xlink:href="/component-library/dist/media/icons.a3ed8a97.svg#corner-arrow"></use>
          </svg></span></button></div>
  </div>
</div>

<div class="ecl-form-group"><label for="select-multiple" id="select-multiple-label" class="ecl-form-label">Select a
    country<span class="ecl-form-label__required" role="note" aria-label="required">*</span></label>
  <div class="ecl-help-block" id="select-multiple-helper">This is the helper text.</div>
  <div class="ecl-select__container ecl-select__container--m"><select class="ecl-select" id="select-multiple"
      name="country" aria-label="country" required aria-describedby="select-multiple-helper" data-ecl-auto-init="Select"
      multiple data-ecl-auto-init="Select" data-ecl-select-multiple data-ecl-select-default="Choose options"
      data-ecl-select-search="Enter filter 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="Apply">
      <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"><button class="ecl-button ecl-button--ghost ecl-button--icon-only" type="button"
        tabindex="-1"><span class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Toggle
            dropdown</span><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 ecl-button__icon" focusable="false"
            aria-hidden="true" data-ecl-icon>
            <use xlink:href="/component-library/dist/media/icons.a3ed8a97.svg#corner-arrow"></use>
          </svg></span></button></div>
  </div>
</div>