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 > .c-select

Select Box without Select2

Show Code

html

<div class="c-float-container">
  <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 > .c-select.js-select2

Select Box with Floating Label

Show Code

html

<div class="c-float-container">
  <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.-light > .c-select.-light

Light Select Dropdown

Show Code

html

<div class="h-highlight-block">
  <div class="c-float-container">
    <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 Box

Show Code

html

<div class="c-float-container -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 Field

Show Code

html

<div class="c-float-container">
  <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 Choices

(not in use)

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

Tag Select

Show Code

html

<div class="c-float-container">
  <label class="c-label" for="multiple-select">Tag Select</label>
  <select class="js-select2" multiple id="multiple-select" name="multiple" data-additional-classes="">
    <option selected value='1'>First item with longer name</option>
    <option value='2'>Second item</option>
    <option value='3'>Third item</option>
    <option value='4'>Lorem Ipsum Dolor</option>
    <option value='5'> 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 selected value='6'> 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>
  </select>
</div>

Select2 Option Groups

optgroup > option ..

With Option Groups

Show Code

html

<div class="c-float-container">
  <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 Options

Show Code

html

<div class="c-float-container">
  <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 Options

Show Code

html

<div class="c-float-container">
  <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

html

<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>

.c-float-container > .c-float-container__icon.-right

See Tooltips for more information.

Floating Label

Show Code

html

<div class="c-float-container">
  <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="far 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

javascript

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 > .c-fake-select

Sonder-PZN

09999005

Show Code

html

<div class="h-highlight-block">
  <div class="c-float-container -is-active h-hover-pointer -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="far 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)

height: auto

Show Code

html

<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

Vue Component: Combobox

The Combobox is a searchable, accessible select field implemented as a Vue component. See Combobox (Vue Component) for more information.

Utilities

Atoms

Molecules

Organisms

Templates

Vue Components

Logger

Select and Select2 Fields

Select vs. Select2

Native Select

With Select2

Light Version

Disabled Select

Select2 with Search Field

Select2 with Multiple Choices

Select2 Option Groups

Disabled Options

Hide Disabled Options

Custom Option Tags

Select2 Link Styling

Select2 with Icon and Tooltip

AJAX Example (with Search and Clear-Button)

Fake Select2

Word Wrapping Demo

Settings and API

Available default options are:

Vue Component: Combobox

Select and Select2 Fields ​

Select vs. Select2 ​

Native Select ​

With Select2 ​

Light Version ​

Disabled Select ​

Select2 with Search Field ​

Select2 with Multiple Choices ​

Select2 Option Groups ​

Disabled Options ​

Hide Disabled Options ​

Custom Option Tags ​

Select2 Link Styling ​

Select2 with Icon and Tooltip ​

AJAX Example (with Search and Clear-Button) ​

Fake Select2 ​

Word Wrapping Demo ​

Settings and API ​

Available default options are: ​

Vue Component: Combobox ​

Select and Select2 Fields

Select vs. Select2

Native Select

With Select2

Light Version

Disabled Select

Select2 with Search Field

Select2 with Multiple Choices

Select2 Option Groups

Disabled Options

Hide Disabled Options

Custom Option Tags

Select2 Link Styling

Select2 with Icon and Tooltip

AJAX Example (with Search and Clear-Button)

Fake Select2

Word Wrapping Demo

Settings and API

Available default options are:

Vue Component: Combobox