Zum Inhalt springen
Handbuch wien.gv.at
Startseite wien.gv.at
Menü

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

Für das Geschlecht gibt es 6 Kategorien: weiblich, männlich, divers, inter, offen, ohne Geschlechtseintrag. “k.A.” verwenden wir in Formularen nicht. Diese Vorgabe gilt einheitlich für alle Formulare und Eingabeelemente – unabhängig von der eingesetzten Technologie.

Vorschau
Code 
<div>
  <label for="select2">Geschlecht</label>
  <select id="select2">
  <option value="">Bitte auswählen</option>
  <option value="1">Weiblich</option>
  <option value="2">Männlich</option>
  <option value="3">Divers</option>
  <option value="4">Inter</option>
  <option value="5">Offen</option>
  <option value="6">Ohne Geschlechtseintrag</option>
  </select>
</div>
Dev

Interaktive Demo
Vorschau Code 
<wm-select data-demo-pattern="wm-select-preview" label="Geschlecht">
  <option>Weiblich</option>
  <option>Männlich</option>
  <option>Divers</option>
  <option>Inter</option>
  <option>Offen</option>
  <option>Ohne Geschlechtseintrag</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
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
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
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
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
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
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
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
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
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
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

wm-select

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 ""
label Text für das Label String leer
hint Text für den Hint String leer
required Markiert Pflichtfelder Boolean false

Methoden

Eigenschaft Optionen Argumente
reset /
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