Select - Forms

Default select list

Select a country (optional)

This is the input's helper text.

<div class="ecl-form-group"><label class="ecl-form-label" for="select-id-1">Select a country<span
      class="ecl-form-label__optional"> (optional)</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 id="select-id-1" name="select-name"
      class="ecl-select">
      <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>
    </select>
    <div class="ecl-select__icon"><svg focusable="false" aria-hidden="true"
        class="ecl-select__icon-shape ecl-icon ecl-icon--s ecl-icon--rotate-180">
        <use xlink:href="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
      </svg></div>
  </div>
</div>

Try it yourself on the playground

Playground

Multiple select list

Fullscreen

<div class="ecl-form-group"><label class="ecl-form-label" for="select-id-2">Select a country<span
      class="ecl-form-label__optional"> (optional)</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 id="select-id-2" name="select-name"
      class="ecl-select" multiple="" data-ecl-select-multiple="true" data-ecl-select-default="Placeholder text"
      data-ecl-select-search="Search" data-ecl-select-all="Select all">
      <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>
    </select>
    <div class="ecl-select__icon"><svg focusable="false" aria-hidden="true"
        class="ecl-select__icon-shape ecl-icon ecl-icon--s ecl-icon--rotate-180">
        <use xlink:href="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
      </svg></div>
  </div>
</div>

Try it yourself on the playground

Playground

Disabled

Select a country (optional)

This is the input's helper text.

Fullscreen

<div class="ecl-form-group"><label class="ecl-form-label ecl-form-label--disabled" for="select-id-3">Select a
    country<span class="ecl-form-label__optional"> (optional)</span></label>
  <div class="ecl-help-block ecl-help-block--disabled">This is the input&#x27;s helper text.</div>
  <div class="ecl-select__container ecl-select__container--disabled ecl-select__container--m"><select id="select-id-3"
      name="select-name" class="ecl-select" disabled="">
      <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>
    </select>
    <div class="ecl-select__icon"><svg focusable="false" aria-hidden="true"
        class="ecl-select__icon-shape ecl-icon ecl-icon--s ecl-icon--rotate-180">
        <use xlink:href="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
      </svg></div>
  </div>
</div>

Try it yourself on the playground

Playground

With error

Select a country (optional)

This is the input's helper text.

This is the error message

Fullscreen

<div class="ecl-form-group"><label class="ecl-form-label ecl-form-label--invalid" for="select-id-4">Select a
    country<span class="ecl-form-label__optional"> (optional)</span></label>
  <div class="ecl-help-block">This is the input&#x27;s helper text.</div>
  <div class="ecl-feedback-message">This is the error message</div>
  <div class="ecl-select__container ecl-select__container--invalid ecl-select__container--m"><select id="select-id-4"
      name="select-name" class="ecl-select">
      <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>
    </select>
    <div class="ecl-select__icon"><svg focusable="false" aria-hidden="true"
        class="ecl-select__icon-shape ecl-icon ecl-icon--s ecl-icon--rotate-180">
        <use xlink:href="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
      </svg></div>
  </div>
</div>

Try it yourself on the playground

Playground

Required

Select a country*

This is the input's helper text.

Fullscreen

<div class="ecl-form-group"><label class="ecl-form-label" for="select-id-5">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 id="select-id-5" name="select-name"
      class="ecl-select" required="">
      <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>
    </select>
    <div class="ecl-select__icon"><svg focusable="false" aria-hidden="true"
        class="ecl-select__icon-shape ecl-icon ecl-icon--s ecl-icon--rotate-180">
        <use xlink:href="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
      </svg></div>
  </div>
</div>

Try it yourself on the playground

Playground

Optional

Select a country (optional)

This is the input's helper text.

Fullscreen

<div class="ecl-form-group"><label class="ecl-form-label" for="select-id-6">Select a country<span
      class="ecl-form-label__optional"> (optional)</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 id="select-id-6" name="select-name"
      class="ecl-select">
      <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>
    </select>
    <div class="ecl-select__icon"><svg focusable="false" aria-hidden="true"
        class="ecl-select__icon-shape ecl-icon ecl-icon--s ecl-icon--rotate-180">
        <use xlink:href="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
      </svg></div>
  </div>
</div>

Try it yourself on the playground

Playground

Widths

Small

Select a country (optional)

This is the input's helper text.

Fullscreen

<div class="ecl-form-group"><label class="ecl-form-label" for="select-id-7">Select a country<span
      class="ecl-form-label__optional"> (optional)</span></label>
  <div class="ecl-help-block">This is the input&#x27;s helper text.</div>
  <div class="ecl-select__container ecl-select__container--s"><select id="select-id-7" name="select-name"
      class="ecl-select">
      <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>
    </select>
    <div class="ecl-select__icon"><svg focusable="false" aria-hidden="true"
        class="ecl-select__icon-shape ecl-icon ecl-icon--s ecl-icon--rotate-180">
        <use xlink:href="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
      </svg></div>
  </div>
</div>

Try it yourself on the playground

Playground

Medium

Select a country (optional)

This is the input's helper text.

Fullscreen

<div class="ecl-form-group"><label class="ecl-form-label" for="select-id-8">Select a country<span
      class="ecl-form-label__optional"> (optional)</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 id="select-id-8" name="select-name"
      class="ecl-select">
      <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>
    </select>
    <div class="ecl-select__icon"><svg focusable="false" aria-hidden="true"
        class="ecl-select__icon-shape ecl-icon ecl-icon--s ecl-icon--rotate-180">
        <use xlink:href="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
      </svg></div>
  </div>
</div>

Try it yourself on the playground

Playground

Large

Select a country (optional)

This is the input's helper text.

Fullscreen

<div class="ecl-form-group"><label class="ecl-form-label" for="select-id-9">Select a country<span
      class="ecl-form-label__optional"> (optional)</span></label>
  <div class="ecl-help-block">This is the input&#x27;s helper text.</div>
  <div class="ecl-select__container ecl-select__container--l"><select id="select-id-9" name="select-name"
      class="ecl-select">
      <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>
    </select>
    <div class="ecl-select__icon"><svg focusable="false" aria-hidden="true"
        class="ecl-select__icon-shape ecl-icon ecl-icon--s ecl-icon--rotate-180">
        <use xlink:href="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
      </svg></div>
  </div>
</div>

Try it yourself on the playground

Playground