Select

Das Select-Feld dient dazu, eine einzelne Option aus einer Liste von vordefinierten Werten auszuwählen. Es reduziert die Komplexität von Formularen, indem es lange Listen kompakt darstellt, und gewährleistet durch standardisierte Auswahlmöglichkeiten eine konsistente Dateneingabe.

Pflichtfeld

Das <select> Element enthält ein required Attribut.

<div class="form-group form-floating select-label element-text">
  <select class="form-select" id="select" aria-label="Dropdown Label" required>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
  </select>
  <label for="select">Label</label>
  <div class="invalid-feedback">Individuelle Fehlermeldung</div>
  <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
</div>

Optional

<div class="form-group form-floating select-label element-text">
  <select class="form-select" id="select-2" aria-label="Dropdown Label">
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
  </select>
  <label for="select-2">Label</label>
  <div class="invalid-feedback">Individuelle Fehlermeldung</div>
  <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
</div>

Vorausgewählt

Das gewünschte <option> Element enthält ein selected Attribut.

<div class="form-group form-floating select-label element-text">
  <select class="form-select" id="select-3" aria-label="Dropdown Label">
    <option value="option-1">Option 1</option>
    <option selected value="option-2">Option 2</option>
  </select>
  <label for="select-3">Label</label>
  <div class="invalid-feedback">Individuelle Fehlermeldung</div>
  <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
</div>

Disabled

Das <select> Element enthält ein disabled Attribut.

<div class="form-group form-floating select-label element-text">
  <select
    class="form-select"
    id="select-4"
    aria-label="Dropdown Label"
    disabled
  >
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
  </select>
  <label for="select-4">Label</label>
  <div class="invalid-feedback">Individuelle Fehlermeldung</div>
  <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
</div>

Disabled Option

Das gewünschte <option> Element enthält ein disabled Attribut.

<div class="form-group form-floating select-label element-text">
  <select class="form-select" id="select-5" aria-label="Dropdown Label">
    <option value="option-1">Option 1</option>
    <option value="no-option-2" disabled>Keine Option 2</option>
    <option value="option-3">Option 3</option>
  </select>
  <label for="select-5">Label</label>
  <div class="invalid-feedback">Individuelle Fehlermeldung</div>
  <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
</div>

Hidden Option

Das gewünschte <option> Element enthält ein hidden sowie disabled und leeres value Attribut. Ein Anwendungsfall wäre eine Art “default” Zustand, der nicht wieder ausgewählt werden kann.

<div class="form-group form-floating select-label element-text">
  <select class="form-select" id="select-6" aria-label="Dropdown Label">
    <option selected value disabled hidden>Treffen Sie eine Auswahl</option>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
  </select>
  <label for="select-6">Label</label>
  <div class="invalid-feedback">Individuelle Fehlermeldung</div>
  <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
</div>

Option Groups

Auswahlmöglichkeiten in einem Select können optional gruppiert werden.

<div class="form-group form-floating select-label element-text">
  <select
    class="form-select"
    id="select-group"
    aria-label="Dropdown Label"
    required
  >
    <optgroup label="Gruppe A">
      <option value="option-a1">Option A1</option>
      <option value="option-a2">Option A2</option>
    </optgroup>
    <optgroup label="Gruppe B">
      <option value="option-b1">Option B1</option>
      <option value="option-b2">Option B2</option>
    </optgroup>
  </select>
  <label for="select-group">Label</label>
  <div class="invalid-feedback">Individuelle Fehlermeldung</div>
  <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
</div>

Selects können optional mit einem Tooltip ergänzt werden. Dieser wird durch ein Icon gekennzeichnet. Der Text kann sowohl mehrzeilig sein, als auch einen Link enthalten und ist bei Hover ersichtlich.

<div class="form-group form-floating select-label element-tooltip">
  <svg
    class="icon icon-info"
    data-bs-custom-class="wko-tooltip"
    data-bs-toggle="tooltip"
    data-bs-html="true"
    data-bs-title="Tooltip, dieser kann sowohl mehrzeilig sein, als auch einen <a href='#'>Link</a> enthalten"
  >
    <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-info"></use>
  </svg>
  <select class="form-select" id="select-7" aria-label="Dropdown Label">
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
  </select>
  <label for="select-7">Label</label>
  <div class="invalid-feedback">Individuelle Fehlermeldung</div>
  <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
</div>

Infotext

Selects können optional mit einem Infotext unterhalb des Eingabefeldes ergänzt werden.

<div class="form-group form-floating select-label element-text">
  <select class="form-select" id="select-8" aria-label="Dropdown Label">
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
  </select>
  <label for="select-8">Label</label>
  <div class="invalid-feedback">Individuelle Fehlermeldung</div>
  <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  <p class="infotext">Infotext ergänzend zum Eingabefeld</p>
</div>