Select and Select2 Fields

.c-select + .js-select2 (optional)

Select fields are used to select a single value from a list of options. This documentation covers the styling of the native select element as well as the styling and functionality of the Select2 dropdown.

• New select fields are always embedded in a Float Container.
• See Input Groups Molecule for combinations of Select Fields, Inputs, Font Awesome Icons, Buttons or Checkboxes.
• Related: Old Select Field

Select vs. Select2

Native Select

Use the class c-select on a select element to get the default styling:
.c-float-container.-has-select > .c-select

Select Box without Select2First itemSecond itemThird itemLorem Ipsumlorem ipsum dolor sit amet consectetur adipisici elitlorem ipsum dolor sit amet consectetur adipisici elitadipisici elitLast item

Show Code

<div class="c-float-container -has-select">
  <label class="c-label" for="style-select">Select Box without Select2</label>
  <select class="c-select" id="style-select" name="opts">
    <option value='0'></option>
    <option value='1'>First item</option>
    <option value='2'>Second item</option>
    <option value='3'>Third item</option>
    <option value='4'>Lorem Ipsum</option>
    <option value='5'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
    <option value='6'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
    <option value='7'>adipisici elit</option>
    <option value='8'>Last item</option>
  </select>
</div>

With Select2

Use the class js-select2 on a select element if you want to initialize Select2 (Version4.1.0-rc.0).

.c-float-container.-has-select > .c-select.js-select2

Select Box with Floating LabelFirst itemSecond itemThird itemLorem Ipsumlorem ipsum dolor sit amet consectetur adipisici elitlorem ipsum dolor sit amet consectetur adipisici elitJust an itemLast item

Show Code

<div class="c-float-container -has-select">
  <label class="c-label" for="default-select">Select Box with Floating Label</label>
  <select class="js-select2" id="default-select" name="default-select">
    <option value='1'>First item</option>
    <option value='2'>Second item</option>
    <option value='3'>Third item</option>
    <option value='4'>Lorem Ipsum</option>
    <option value='5'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
    <option value='6'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
    <option value='7'>Just an item</option>
    <option value='8'>Last item</option>
  </select>
</div>

Light Version

.c-float-container.-has-select.-light > .c-select.-light

Light Select DropdownFirst itemSecond itemThird item

Show Code

<div class="p-b-l h-highlight-block">
  <div class="c-float-container -has-select -light">
    <label class="c-label" for="light">Light Select Dropdown</label>
    <select class="js-select2" id="light" name="light-select" data-additional-classes="-light">
      <option value="0"></option>
      <option value='1'>First item</option>
      <option value='2'>Second item</option>
      <option value='3'>Third item</option>
    </select>
  </div>
</div>

Disabled Select

.c-select[disabled]

Disabled Select BoxFirst itemSecond itemThird itemLorem Ipsumlorem ipsum dolor sit amet consectetur adipisici elitlorem ipsum dolor sit amet consectetur adipisici elitJust an itemLast item

selected itemitemselected itemitem

Show Code

<div class="c-float-container -has-select -is-disabled">
  <label class="c-label" for="disabled-box">Disabled Select Box</label>
  <select class="js-select2" disabled id="disabled-box" name="opts">
    <option value='1'>First item</option>
    <option value='2'>Second item</option>
    <option value='3'>Third item</option>
    <option value='4'>Lorem Ipsum</option>
    <option value='5'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
    <option value='6'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
    <option value='7'>Just an item</option>
    <option value='8'>Last item</option>
  </select>
</div>
<select class="m-t-xl js-select2" disabled name="disabled-link-select" data-additional-classes="-is-link">
  <option value="1" class="js-option-lager">selected item</option>
  <option value="0" class="js-option-no-lager">item</option>
</select>
<select class="m-t-xl js-select2" disabled name="disabled-link-select-small" data-additional-classes="-is-link -small">
  <option value="1" class="js-option-lager">selected item</option>
  <option value="0" class="js-option-no-lager">item</option>
</select>

Select2 with Search Field

The search field in the dropdown is hidden per default, add the attribute data-search to enable it: .js-select2[data-search]

Select Box with Search FieldFirst itemSecond itemThird itemLorem Ipsum

Show Code

<div class="c-float-container -has-select m-b-m">
  <label class="c-label" for="select-search">Select Box with Search Field</label>
  <select class="js-select2" data-search id="select-search">
    <option value='1'>First item</option>
    <option value='2'>Second item</option>
    <option value='3'>Third item</option>
    <option value='4'>Lorem Ipsum</option>
  </select>
</div>

Select2 with Multiple Selection

<select class="js-select2" multiple ..

Multiple SelectFirst itemSecond itemThird itemLorem Ipsum

Show Code

<div class="c-float-container -has-select m-b-m">
  <label class="c-label" for="multiple-select">Multiple Select</label>
  <select class="js-select2" multiple id="multiple-select" name="multiple" data-additional-classes="">
    <option selected value='1'>First item</option>
    <option value='2'>Second item</option>
    <option value='3'>Third item</option>
    <option value='4'>Lorem Ipsum</option>
  </select>
</div>

Select2 Option Groups

optgroup > option ..

With Option GroupsNested option 1Nested option 2Nested option 1Nested option 2

Show Code

<div class="c-float-container -has-select m-b-m">
  <label class="c-label" for="option-groups">With Option Groups</label>
  <select class="js-select2" data-search id="option-groups">
    <optgroup label="Group Name">
      <option>Nested option 1</option>
      <option>Nested option 2</option>
    </optgroup>
    <optgroup label="Group Name 2">
      <option>Nested option 1</option>
      <option>Nested option 2</option>
    </optgroup>
  </select>
</div>

Disabled Options

Add the attribute disabled to disable options in the dropdown:
<option value='...' disabled>

Select Box with Disabled OptionsFirst itemSecond itemThird itemLast item

Show Code

<div class="c-float-container -has-select">
  <label class="c-label" for="diss">Select Box with Disabled Options</label>
  <select class="js-select2" id="diss" name="disabled-options1">
    <option value='1'>First item</option>
    <option value='2' disabled>Second item</option>
    <option value='3'>Third item</option>
    <option value='4' disabled>Last item</option>
  </select>
</div>

Hide Disabled Options

Add the attribute data-hide-disabled to hide disabled options in the dropdown:
.js-select2[data-hide-disabled]

Select Box with Hidden Disabled OptionsFirst itemSecond itemThird itemLast item

Show Code

<div class="c-float-container -has-select">
  <label class="c-label" for="hide-disabled-opts">Select Box with Hidden Disabled Options</label>
  <select class="js-select2"  data-hide-disabled id="hide-disabled-opts" >
    <option value='1'>First item</option>
    <option value='2' disabled>Second item</option>
    <option value='3'>Third item</option>
    <option value='4' disabled>Last item</option>
  </select>
</div>

Custom Option Tags

If you want to allow custom options tags, add the attribute data-custom-options

Select2 Link Styling

Add the class .-is-link to the select element to get a link-style select field:
.js-select2.c-select.-is-link[.-small]

✓✕

✓✕

Show Code

<div class="h-flex h-space-around">
  <div class="h-width-40">
    <select class="js-select2 demo-link-example" name="link-select" data-additional-classes="-is-link -has-icons">
      <option value="1" class="js-option-lager">✓</option>
      <option value="0" class="js-option-no-lager">✕</option>
    </select>
  </div>
  <div class="h-width-40">
    <select class="js-select2 demo-link-example" name="link-select-small" id="link-select-small" data-additional-classes="-is-link -small">
      <option value="1" class="js-option-lager">✓</option>
      <option value="0" class="js-option-no-lager">✕</option>
    </select>
  </div>
</div>

Select2 with Icon and Tooltip

.c-float-container.-has-select.-has-icon.-icon-right > .c-float-container__icon

See Tooltips for more information.

Floating LabelFirst itemSecond itemThird itemLast item

Show Code

<div class="c-float-container -has-select -has-icon -icon-right">
  <label class="c-label" for="select-info">Floating Label</label>
  <select class="js-select2" id="select-info" name="select-info-name" data-additional-classes="-icon">
    <option value='1'>First item</option>
    <option value='2'>Second item</option>
    <option value='3'>Third item</option>
    <option value='4'>Last item</option>
  </select>
  <div class="c-float-container__icon -right js-tooltip" data-title="Prüfzertifikat löschen"
       data-placement="left">
    <span class="fa fa-info-circle" aria-hidden="true"></span>
  </div>
</div>

AJAX Example (with Search and Clear-Button)

TIP

• allowClear needs a placeholder and placeholder need a corresponding option value (which cannot be an empty string, but can be a single space)
• Select2 AJAX support: See select2.org/data-sources/ajax

Show Code for AJAX Example

import {Select} from "./Select";
Select.init();

const $select = $(".js-example");
const mergedSelectOptions = $.extend(true, {}, Select.getOptionsWithTags("Unbekannter Bestandteil"), {
    ajax: {
        url: "https://jsonplaceholder.typicode.com/posts/", // aktuell Dummy-API, gerne auch andere Endpunkte ausprobieren!
        dataType: "json",
        allowClear: true, // always use in combination with data-placeholder attribute on element
        processResults: function (data) {
            /**
             * Wir setzen "text" (also den Text in der Zeile) hier auf den Namen des Elements.
             * Siehe https://select2.org/data-sources/formats
             * Da die Elemente von der Dummy-API ohnehin schon ein Attribut "id" haben, müssen wir das nicht extra setzen.
             */
            data.forEach(resultObj => {
                    resultObj.info = resultObj.body;
                    resultObj.text = resultObj.title;
                    Select.addOptionTagsIfNotExists($select, resultObj);
                }
            );
            return {
                results: data
            };
        }
    }
});

$select.each(function () {
    Select.apply($(this), mergedSelectOptions);
});

Fake Select2

A simple div that is not initialized by Select2 but has the same look. It can be used to display read-only values.

.c-float-container.-has-select > .c-fake-select

Sonder-PZN

Für die korrekte Erstellung von Z-Daten und Hash-Code ist die tatsächliche PZN Ihres Bestandteils anzugeben. Hilfstaxen-PZN bzw. Sonder-PZN sind dann anzugeben, wenn Sie einen Bestandteil ohne tatsächliche PZN verwenden.

09999005

Show Code

<div class="h-highlight-block">
  <div class="c-float-container -is-active -has-select h-hover-pointer -has-icon -has-small-icon -light m-y-reset">
    <span class="c-label">Sonder-PZN</span>
    <div class="print-hide c-float-container__icon h-help-pointer c-tooltip__trigger -left -small">
      <span class="fa fa-info-circle h-link-color" aria-hidden="true"></span>
      <div data-cy="tooltip" class="c-tooltip h-always-on-top m-t-xxs -large m-l-s m-t-s">
        Für die korrekte Erstellung von Z-Daten und Hash-Code ist die tatsächliche PZN Ihres Bestandteils anzugeben.
        Hilfstaxen-PZN bzw. Sonder-PZN sind dann anzugeben, wenn Sie einen Bestandteil ohne tatsächliche PZN verwenden.
      </div>
    </div>
    <div class="c-fake-select h-width-100 p-r-xxl p-l-xxl p-l-xl">
      <div class="c-fake-select__content -m-l-s">09999005</div>
      <span class="c-fake-select__arrow">
        <b></b>
      </span>
  </div>
  </div>
</div>

Word Wrapping Demo

height: auto

Multiline (Default)Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. lorem ipsum dolor sit amet consectetur adipisici elit

height: autoloremipsumdolorsitametconsecteturadipisicielitlorem ipsum dolor sit amet consectetur adipisici elit

Show Code

<div class="h-flex h-space-between">
  <div class="h-width-30">
    <code>height: auto</code><br/>
    <div class="c-float-container -has-select -is-active">
      <label class="c-label" for="multiline">Multiline (Default)</label>
      <select class="js-select2" id="multiline" name="opts">
        <option value='1'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </option>
        <option value='2'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
      </select>
    </div>
  </div>
  <div class="h-width-30">
    <code>height: auto</code>
    <select class="js-select2 demo-link-example"
            data-additional-classes="-is-link -small"
            name="link-select" id="link-select-small2">
      <option value="1">loremipsumdolorsitametconsecteturadipisicielit</option>
      <option value="0" class="js-option-no-lager">lorem ipsum dolor sit amet consectetur adipisici elit</option>
    </select>
  </div>
</div>

Settings and API

Show API and Settings

• Form.init() to activate Floating Labels. See Forms Module.
• Select.init() to apply default settings and initialize select2 on all js-select2 selects.

Use Select.apply($select, options); to apply your own options on a specific select-field. You can also extend the default options.

Available default options are:

• Select.getDefaultOptions() @returns default settings for standard select-dropdowns
• Select.getOptionsWithSearch() @returns extended settings for select-dropdowns with search
• Select.getOptionsWithTags(unknownTerm) @returns extended settings for select-dropdowns with search and custom tags, @param {String} unknownTerm - optional parameter that describes the type of the "unknown custom tag" that is added