Select - Forms

Select a country

This is the input's helper text.

<div class="ecl-form-group ecl-form-group--select"><label class="ecl-form-label" for="select-id">Select a
    country</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" name="select-name"
      class="ecl-select">
      <option value="1">Belgium</option>
      <option value="2">France</option>
      <option value="3">Luxembourg</option>
      <option value="4">Germany</option>
      <option value="5">Bulgaria</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="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
      </svg></div>
  </div>
</div>

Try it yourself on the playground

Playground

Disabled

Select a country

This is the input's helper text.

Fullscreen

<div class="ecl-form-group ecl-form-group--select"><label class="ecl-form-label ecl-form-label--disabled"
    for="select-id-2">Select a country</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-2"
      name="select-name" class="ecl-select" disabled="">
      <option value="1">Belgium</option>
      <option value="2">France</option>
      <option value="3">Luxembourg</option>
      <option value="4">Germany</option>
      <option value="5">Bulgaria</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="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
      </svg></div>
  </div>
</div>

Try it yourself on the playground

Playground

With error

Select a country

This is the input's helper text.

This is the error message

Fullscreen

<div class="ecl-form-group ecl-form-group--select"><label class="ecl-form-label ecl-form-label--invalid"
    for="select-id-3">Select a country</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--m"><select id="select-id-3" name="select-name"
      class="ecl-select ecl-select--invalid">
      <option value="1">Belgium</option>
      <option value="2">France</option>
      <option value="3">Luxembourg</option>
      <option value="4">Germany</option>
      <option value="5">Bulgaria</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="/dist/media/icons.1dbe9812.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 ecl-form-group--select"><label class="ecl-form-label" for="select-id-4">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-4" name="select-name"
      class="ecl-select">
      <option value="1">Belgium</option>
      <option value="2">France</option>
      <option value="3">Luxembourg</option>
      <option value="4">Germany</option>
      <option value="5">Bulgaria</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="/dist/media/icons.1dbe9812.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 ecl-form-group--select"><label class="ecl-form-label" for="select-id-5">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-5" name="select-name"
      class="ecl-select">
      <option value="1">Belgium</option>
      <option value="2">France</option>
      <option value="3">Luxembourg</option>
      <option value="4">Germany</option>
      <option value="5">Bulgaria</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="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
      </svg></div>
  </div>
</div>

Try it yourself on the playground

Playground

Widths

Small

Select a country

This is the input's helper text.

Fullscreen

<div class="ecl-form-group ecl-form-group--select"><label class="ecl-form-label" for="select-id-6">Select a
    country</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-6" name="select-name"
      class="ecl-select">
      <option value="1">Belgium</option>
      <option value="2">France</option>
      <option value="3">Luxembourg</option>
      <option value="4">Germany</option>
      <option value="5">Bulgaria</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="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
      </svg></div>
  </div>
</div>

Try it yourself on the playground

Playground

Medium

Select a country

This is the input's helper text.

Fullscreen

<div class="ecl-form-group ecl-form-group--select"><label class="ecl-form-label" for="select-id-7">Select a
    country</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-7" name="select-name"
      class="ecl-select">
      <option value="1">Belgium</option>
      <option value="2">France</option>
      <option value="3">Luxembourg</option>
      <option value="4">Germany</option>
      <option value="5">Bulgaria</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="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
      </svg></div>
  </div>
</div>

Try it yourself on the playground

Playground

Large

Select a country

This is the input's helper text.

Fullscreen

<div class="ecl-form-group ecl-form-group--select"><label class="ecl-form-label" for="select-id-8">Select a
    country</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-8" name="select-name"
      class="ecl-select">
      <option value="1">Belgium</option>
      <option value="2">France</option>
      <option value="3">Luxembourg</option>
      <option value="4">Germany</option>
      <option value="5">Bulgaria</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="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
      </svg></div>
  </div>
</div>

Try it yourself on the playground

Playground