Formular: Select

Das Pattern Select zeigt eine (ausklappbare) Liste von Optionen an und ermöglicht es Nutzer*innen, eine oder mehrere davon auszuwählen.

Varianten

Formular: Select reines HTML

Vorschau

Beschäftigungsausmaß

Code

<div>
  <label for="select1">Beschäftigungsausmaß</label>
  <select id="select1">
    <option value="">Alle</option>
    <option value="1">Vollzeit</option>
    <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
    <option value="3">Teilzeit</option>
    <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
    <option value="5">Vollzeit und Teilzeit möglich</option>
    <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
  </select>
</div>

Formular: Select mit Webcomponent

Vorschau

Code

<wm-select label="Beschäftigungsausmaß">
  <option value="">Alle</option>
  <option value="1">Vollzeit</option>
  <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
  <option value="3">Teilzeit</option>
  <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
  <option value="5">Vollzeit und Teilzeit möglich</option>
  <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
</wm-select>

Dev

Interaktive Demo

label

error

hint

requiredText

size

required

hideAsterisk

disabled

multiple

Vorschau

Code

<wm-select data-demo-pattern="wm-select-preview" label="Geschlecht">
  <option>Diverasdfs</option>
  <option>Männlich</option>
  <option>Weiblich</option>
</wm-select>

Weitere Beispiele

Alle Formularelemente können nativ in HTML abgebildet werden. Aufgrund der mangelnden Abhängigkeit von JavaScript ist das auch der bevorzugte Weg. Wird erweiterte Funktionalität wie clientseitige Validierung, Ein- und Ausblenden von Passwörtern, Anzeigen der maximalen Zeichenanzahl et cetera benötigt, müssen Sie alternativ die Webcomponent-Variante verwenden.

HTML

Formular: Select

Vorschau

Beschäftigungsausmaß

Code

<div>
  <label for="select2">
    Beschäftigungsausmaß
  </label>
  <select id="select2">
    <option value="">Alle</option>
    <option value="1">Vollzeit</option>
    <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
    <option value="3">Teilzeit</option>
    <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
    <option value="5">Vollzeit und Teilzeit möglich</option>
    <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
  </select>
</div>

Formular: Select mit Vorauswahl

Vorschau

Beschäftigungsausmaß

Code

<div>
  <label for="select3">
    Beschäftigungsausmaß
  </label>
  <select id="select3">
    <option value="">Alle</option>
    <option value="1">Vollzeit</option>
    <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
    <option value="3" selected>Teilzeit</option>
    <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
    <option value="5">Vollzeit und Teilzeit möglich</option>
    <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
  </select>
</div>

Formular: Select mit Pflichtfeld

Vorschau

Beschäftigungsausmaß *

Code

<div>
  <label for="select4">
    Beschäftigungsausmaß
    <abbr title="Pflichtfeld">*</abbr>
  </label>
  <select id="select4" required>
    <option value="">Alle</option>
    <option value="1">Vollzeit</option>
    <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
    <option value="3">Teilzeit</option>
    <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
    <option value="5">Vollzeit und Teilzeit möglich</option>
    <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
  </select>
</div>

Formular: Select mit Pflichtfeld ohne Sternchen

Vorschau

Beschäftigungsausmaß (Pflichtfeld)

Code

<div>
  <label for="select5">
    Beschäftigungsausmaß
    (Pflichtfeld)
  </label>
  <select id="select5" required>
    <option value="">Alle</option>
    <option value="1">Vollzeit</option>
    <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
    <option value="3">Teilzeit</option>
    <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
    <option value="5">Vollzeit und Teilzeit möglich</option>
    <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
  </select>
</div>

Formular: Select mit Beschreibung

Vorschau

Beschäftigungsausmaß

Bitte bevorzugte Option angeben

Code

<div>
  <label for="select6">
    Beschäftigungsausmaß
  </label>
  <div class="wm-forms-message" id="msg_select6">
    Bitte bevorzugte Option angeben
  </div>
  <select id="select6"  aria-describedby="msg_select6">>
    <option value="">Alle</option>
    <option value="1">Vollzeit</option>
    <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
    <option value="3">Teilzeit</option>
    <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
    <option value="5">Vollzeit und Teilzeit möglich</option>
    <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
  </select>
</div>

Formular: Select mit Fehler

Vorschau

Beschäftigungsausmaß

Bitte Beschäftigungsausmaß auswählen

Code

<div>
  <label for="select7">
    Beschäftigungsausmaß
  </label>
  <select id="select7"  aria-describedby="msg_select7" aria-invalid="true">
    <option value="">Alle</option>
    <option value="1">Vollzeit</option>
    <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
    <option value="3">Teilzeit</option>
    <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
    <option value="5">Vollzeit und Teilzeit möglich</option>
    <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
  </select>
  <div class="wm-forms-message" id="msg_select7">
    Bitte Beschäftigungsausmaß auswählen
  </div>
</div>

Formular: Select mit komplexer Beschreibung

Vorschau

Beschäftigungsausmaß

Das Besondere an dieser Beschreibung ist,
dass HTML übergeben wird.

Code

<div>
  <label for="select8">
    Beschäftigungsausmaß
  </label>
  <div class="wm-forms-message" id="msg_select8">
    <wm-highlight color="wasserblau-light">
      Das Besondere an dieser Beschreibung ist,<br>
      dass HTML übergeben wird.
    </wm-highlight>
  </div>
  <select id="select8"  aria-describedby="msg_select8">
    <option value="">Alle</option>
    <option value="1">Vollzeit</option>
    <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
    <option value="3">Teilzeit</option>
    <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
    <option value="5">Vollzeit und Teilzeit möglich</option>
    <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
  </select>
</div>

Formular: Select mit komplexem Fehler

Vorschau

Beschäftigungsausmaß

Das Besondere an diesem Fehler ist,
dass HTML übergeben wird.

Code

<div>
  <label for="select9">
    Beschäftigungsausmaß
  </label>
  <select id="select9"  aria-describedby="msg_select9" aria-invalid="true">
    <option value="">Alle</option>
    <option value="1">Vollzeit</option>
    <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
    <option value="3">Teilzeit</option>
    <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
    <option value="5">Vollzeit und Teilzeit möglich</option>
    <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
  </select>
  <div class="wm-forms-message" id="msg_select9">
    <wm-highlight color="morgenrot-light">
      Das Besondere an diesem Fehler ist,<br>
      dass HTML übergeben wird.
    </wm-highlight>
  </div>
</div>

Formular: Select mit sichtbaren Optionen

Vorschau

Beschäftigungsausmaß

Code

<div>
  <label for="select10">
    Beschäftigungsausmaß
  </label>
  <select id="select10" size="7">
    <option value="">Alle</option>
    <option value="1">Vollzeit</option>
    <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
    <option value="3">Teilzeit</option>
    <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
    <option value="5">Vollzeit und Teilzeit möglich</option>
    <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
  </select>
</div>

Formular: Select mit sichtbaren Optionen und Mehrfachauswahl

Vorschau

Beschäftigungsausmaß

Code

<div>
  <label for="select11">
    Beschäftigungsausmaß
  </label>
  <select id="select11" size="7" multiple>
    <option value="">Alle</option>
    <option value="1">Vollzeit</option>
    <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
    <option value="3">Teilzeit</option>
    <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
    <option value="5">Vollzeit und Teilzeit möglich</option>
    <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
  </select>
</div>

Webcomponent

Formular: Select

Vorschau

Code

<wm-select label="Beschäftigungsausmaß">
  <option value="">Alle</option>
  <option value="1">Vollzeit</option>
  <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
  <option value="3">Teilzeit</option>
  <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
  <option value="5">Vollzeit und Teilzeit möglich</option>
  <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
</wm-select>

Formular: Select Disabled

Vorschau

Code

<wm-select label="Beschäftigungsausmaß" disabled>
  <option value="">Alle</option>
  <option value="1">Vollzeit</option>
  <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
  <option value="3">Teilzeit</option>
  <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
  <option value="5">Vollzeit und Teilzeit möglich</option>
  <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
</wm-select>

Formular: Select mit Vorauswahl

Vorschau

Code

<wm-select label="Beschäftigungsausmaß">
  <option value="">Alle</option>
  <option value="1">Vollzeit</option>
  <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
  <option value="3" selected>Teilzeit</option>
  <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
  <option value="5">Vollzeit und Teilzeit möglich</option>
  <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
</wm-select>

Formular: Select als Pflichtfeld

* Wird automatisch durch die Präsenz des required Attributs angezeigt.

Vorschau

Code

<wm-select label="Beschäftigungsausmaß" required>
  <option value="">Alle</option>
  <option value="1">Vollzeit</option>
  <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
  <option value="3">Teilzeit</option>
  <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
  <option value="5">Vollzeit und Teilzeit möglich</option>
  <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
</wm-select>

Formular: Select als Pflichtfeld ohne Sternchen

* Wird durch die Präsenz des required Attributs gesetzt und automatisch durch die Präsenz des hideAsterisk mit "Pflichtfeld" ersetzt.

Vorschau

Code

<wm-select label="Beschäftigungsausmaß" required hideAsterisk>
  <option value="">Alle</option>
  <option value="1">Vollzeit</option>
  <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
  <option value="3">Teilzeit</option>
  <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
  <option value="5">Vollzeit und Teilzeit möglich</option>
  <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
</wm-select>

Formular: Select als Pflichtfeld ohne Sternchen mit benutzerdefiniertem Text

* Wird durch die Präsenz des required Attributs gesetzt und automatisch durch die Präsenz des hideAsterisk und mit dem Wert des requiredText Attributs ersetzt.

Vorschau

Code

<wm-select label="Beschäftigungsausmaß" required hideAsterisk requiredText="Alternativer Pflichttext">
  <option value="">Alle</option>
  <option value="1">Vollzeit</option>
  <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
  <option value="3">Teilzeit</option>
  <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
  <option value="5">Vollzeit und Teilzeit möglich</option>
  <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
</wm-select>

Formular: Select Mit einfacher Beschreibung

* Wird durch die Präsenz des hint Attributs gesetzt.

Vorschau

Code

<wm-select label="Beschäftigungsausmaß" hint="Bitte bevorzugte Option angeben">
    <option value="">Alle</option>
    <option value="1">Vollzeit</option>
    <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
    <option value="3">Teilzeit</option>
    <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
    <option value="5">Vollzeit und Teilzeit möglich</option>
    <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
  </wm-select>

Formular: Select Mit einfachem Fehler

Vorschau

Code

<wm-select label="Beschäftigungsausmaß" error="Bitte Beschäftigungsausmaß auswählen">
    <option value="">Alle</option>
    <option value="1">Vollzeit</option>
    <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
    <option value="3">Teilzeit</option>
    <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
    <option value="5">Vollzeit und Teilzeit möglich</option>
    <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
  </wm-select>

Mit komplexer Beschreibung

Vorschau

Das Besondere an dieser Beschreibung ist,
dass HTML übergeben wird.

Code

<wm-select label="Beschäftigungsausmaß" >
    <option value="">Alle</option>
    <option value="1">Vollzeit</option>
    <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
    <option value="3">Teilzeit</option>
    <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
    <option value="5">Vollzeit und Teilzeit möglich</option>
    <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
    <div slot="hint">
      <wm-highlight color="wasserblau-light">
        Das Besondere an dieser Beschreibung ist,<br>
        dass HTML übergeben wird.
      </wm-highlight>
    </div>
  </wm-select>

Formular: Select Select komplexem Fehler

Vorschau

Das Besondere an diesem Fehler ist,
dass HTML übergeben wird.

Code

<wm-select label="Beschäftigungsausmaß" >
  <option value="">Alle</option>
  <option value="1">Vollzeit</option>
  <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
  <option value="3">Teilzeit</option>
  <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
  <option value="5">Vollzeit und Teilzeit möglich</option>
  <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
  <div slot="error">
    <wm-highlight color="morgenrot-light">
      Das Besondere an diesem Fehler ist,<br>
      dass HTML übergeben wird.
    </wm-highlight>
  </div>
</wm-select>

Formular: Select Mit Beschreibung und Fehler

Vorschau

Code

<wm-select label="Beschäftigungsausmaß" hint="Bitte bevorzugte Option angeben" error="Bitte Beschäftigungsausmaß auswählen">
    <option value="">Alle</option>
    <option value="1">Vollzeit</option>
    <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
    <option value="3">Teilzeit</option>
    <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
    <option value="5">Vollzeit und Teilzeit möglich</option>
    <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
  </wm-select>

Formular: Select Mit Beschreibung und Fehler

Vorschau

Code

<wm-select label="Beschäftigungsausmaß" info="Bitte bevorzugte Option angeben" error="Bitte Beschäftigungsausmaß auswählen">
    <option value="">Alle</option>
    <option value="1">Vollzeit</option>
    <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
    <option value="3">Teilzeit</option>
    <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
    <option value="5">Vollzeit und Teilzeit möglich</option>
    <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
  </wm-select>

Formular: Select Change Event

Vorschau

Code

<wm-select label="Beschäftigungsausmaß" id="event">
    <option value="">Alle</option>
    <option value="1">Vollzeit</option>
    <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
    <option value="3">Teilzeit</option>
    <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
    <option value="5">Vollzeit und Teilzeit möglich</option>
    <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
  </wm-select>
  <script>
    const select = document.querySelector('#event');
    select.addEventListener('wm-change', e => {
      console.log(e)
    })
  </script>

Formular: Select Mit mehr als einer sichtbaren Auswahl

Vorschau

Code

<wm-select label="Beschäftigungsausmaß" size="7">
  <option value="">Alle</option>
  <option value="1">Vollzeit</option>
  <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
  <option value="3">Teilzeit</option>
  <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
  <option value="5">Vollzeit und Teilzeit möglich</option>
  <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
</wm-select>

Formular: Select Mit mehr als einer sichtbaren Auswahl und Mehrfachauswahl

Vorschau

Code

<wm-select label="Beschäftigungsausmaß" size="7" multiple>
  <option value="">Alle</option>
  <option value="1">Vollzeit</option>
  <option value="2">Vollzeit, befristetes Dienstverhältnis</option>
  <option value="3">Teilzeit</option>
  <option value="4">Teilzeit, befristetes Dienstverhältnis</option>
  <option value="5">Vollzeit und Teilzeit möglich</option>
  <option value="6">Vollzeit und Teilzeit möglich, befristetes Dienstverhältnis</option>
</wm-select>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/Select/Select.js" type="module"></script>

JavaScript

import { Select } from './wienermelange/assets/js/components/Select/Select.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`multiple`	Mehrere Auswählbar	`Boolean`	`false`
`errormessage`	Fehlermeldung bei ungültiger Eingabe Diese Meldung wird direkt am Select-Element angezeigt, wenn es validiert wird und ungültig ist.	`String`	`""`
`summaryErrormessage`	Spezifische Fehlermeldung für die Fehlerübersicht Diese Meldung wird in der Fehlerübersicht (wm-formerrorsummary) anstelle der normalen Fehlermeldung angezeigt. Dies ist nützlich, um in der Übersicht kontextspezifischere Fehlermeldungen anzuzeigen, z.B. "Bitte wählen Sie eine Option bei 'Personendaten-Typ - Art des Antrags'" statt nur "Auswahl erforderlich".	`String`	`""`
`options`	Semikolon-getrennte Liste von Optionsbeschriftungen	`String`	`""`
`values`	Semikolon-getrennte Liste von Optionswerten	`String`	`""`
`selected`	Semikolon-getrennte Liste von vorausgewählten Werten	`String`	`""`
`disabledoptions`	Semikolon-getrennte Liste von deaktivierten Optionen (true/false)	`String`	`""`
`_debounceTimer`

Methoden

Eigenschaft	Optionen	Argumente
`reset`		/
`formResetCallback`	Reset the component to its initial state (called by forms)	/
`firstUpdated`	Captures initial value from DOM after first render
`updated`	Override of updated lifecycle to handle attribute/property changes
`formDisabledCallback`	Called when the element's form sets the disabled state	Whether the control should be disabled (`boolean`)
`hideOptions`	Liste in Combobox verbergen	Fokus auf Input legen (true) (`Boolean`)
`showOptions`	Liste in Combobox anzeigen	/

Events

Event	Beschreibung	Rückgabewert

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at