Formular: Select

Akkordeon
Anker
Audio-Player
Bild
Bot
Breaking News
Button
Card update
Chip
Copyright
Details
Exposé
Fetch
Flip-Card
Footer
Formular: Block
Formular: Checkbox
Formular: Combobox
Formular: Fehlerliste
Formular: Filter
Formular: Fortschrittsanzeige
Formular: Input
Formular: Layouts
Formular: Radio
Formular: Select
Formular: Switch
Formular: Textfeld
Formular: Upload
Formular: Validierung
Galerie
Grid
Header
Hervorgehobener Link
Hervorhebung
Icon
In-Page Navigation
Infobox
Karussell
Kontakt
Links
Liste update
Logo
Map
Meldung
Menü
Modal
Newsletter
One Time Password (OTP) – Eingabe von Einmalpasswörtern
Pager
Paginierung
Quicklink-Liste
Reiter
Section
Sidebar
Skip Link
Social Media
Stack
Stage
Status
Suche
Tabelle
Tag update
Trenner neu
Video-Player
Vorspann
Zeitstempel
Zitat

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

Geschlecht

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

label

error

hint

requiredText

size

required

hideAsterisk

disabled

multiple

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.

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>

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>

API

wm-select

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`size`	Anzahl der sichtbaren Optionen	`String`	leer
`multiple`	Mehrere Auswählbar	`Boolean`	`false`
`disabled`	Disabled	`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`	`""`
`hasError`	Gibt an, ob das Element einen Fehler hat	`Boolean`	`false`
`error`	Aktuelle Fehlermeldung	`String`	`""`
`validate`	Aktiviert die Validierung bei Eingabe	`boolean`	`false`
`showErrors`	Sofortige Fehleranzeige	`boolean`	`false`
`options`	Semikolon-getrennte Liste von Optionsbeschriftungen	`String`	`""`
`values`	Semikolon-getrennte Liste von Optionswerten	`String`	`""`
`selected`	Semikolon-getrennte Liste von vorausgewählten Werten	`String`	`""`
`disabledoptions`	Veraltet: Use 'disabled="true;false;true"' syntax instead 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`
`value`	Aktueller Wert des Select-Elements	`string`	`''`
`defaultValue`	Default value of the component	`String`	`''`
`announcementText`	Text, der angekündigt wird, wenn Optionen angezeigt werden	`String`	`"Suchvorschläge werden angezeigt. Verwenden Sie Pfeiltasten um zu navigieren"`
`maxlengthText`	Text for maxlength message	`String`	`"Es sind noch {remaining} Zeichen verfügbar"`
`patternMismatchMessage`	Pattern validation message	`String`	`"Bitte geben Sie einen gültigen Wert ein"`
`maxlength`	Maximale Zeichenanzahl, die eingegeben werden darf	`Number`	leer
`placeholder`	placeholder-Attribut in HTML	`String`	leer
`search`	Art des Suchfeldes	`'hidden'\|'visible'\|'hiddenmobile'`	leer
`filter`	Liste in Combobox beim Tippen filtern	`Boolean`	`false`
`hideMaxlength`	Verfügbare Zeichenanzahl verbergen	`Boolean`	`false`
`info`		`string`	leer

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