Formular: Combobox

Das Pattern Combobox kombiniert Texteingabe mit einer Listendarstellung. Nutzer*innen können, entsprechend ihrer Abfrage, aus einer Liste vorgeschlagener Optionen wählen.

Varianten

Formular: Combobox

Die Optionen werden angezeigt, sobald Sie zu tippen beginnen oder die Pfeiltasten betätigen. Die Optionen werden bei Eingabe nicht gefiltert.

Vorschau

Grundlagenerhebung
Konzepterstellung
Widmungsverfahren
Gemeinderatsbeschluss
In Umsetzung
Umgesetzt

Code

<wm-input type="combobox" label="Projektstand">
  <ul slot="options">
    <li data-value="grundlagenerhebung">Grundlagenerhebung</li>
    <li data-value="konzepterstellung">Konzepterstellung</li>
    <li data-value="widmungsverfahren">Widmungsverfahren</li>
    <li data-value="gemeinderatsbeschluss">Gemeinderatsbeschluss</li>
    <li data-value="inumsetzung">In Umsetzung</li>
    <li data-value="umgesetzt">Umgesetzt</li>
  </ul>
</wm-input>

Formular: Combobox mit Button

Button zum Ein- und Ausklappen der Optionen.

Vorschau

Grundlagenerhebung
Konzepterstellung
Widmungsverfahren
Gemeinderatsbeschluss
In Umsetzung
Umgesetzt

Code

<wm-input type="combobox" label="Projektstand" toggleButton>
  <ul slot="options">
    <li data-value="grundlagenerhebung">Grundlagenerhebung</li>
    <li data-value="konzepterstellung">Konzepterstellung</li>
    <li data-value="widmungsverfahren">Widmungsverfahren</li>
    <li data-value="gemeinderatsbeschluss">Gemeinderatsbeschluss</li>
    <li data-value="inumsetzung">In Umsetzung</li>
    <li data-value="umgesetzt">Umgesetzt</li>
  </ul>
</wm-input>

Formular: Combobox mit Button und Filter

Die Optionen werden bei Eingabe gefiltert.

Vorschau

Grundlagenerhebung
Konzepterstellung
Widmungsverfahren
Gemeinderatsbeschluss
In Umsetzung
Umgesetzt

Code

<wm-input type="combobox" label="Projektstand" toggleButton filter>
  <ul slot="options">
    <li data-value="grundlagenerhebung">Grundlagenerhebung</li>
    <li data-value="konzepterstellung">Konzepterstellung</li>
    <li data-value="widmungsverfahren">Widmungsverfahren</li>
    <li data-value="gemeinderatsbeschluss">Gemeinderatsbeschluss</li>
    <li data-value="inumsetzung">In Umsetzung</li>
    <li data-value="umgesetzt">Umgesetzt</li>
  </ul>
</wm-input>

Formular: Combobox mit Filter und Unterteilungen

Lange Listen können gruppiert werden.

Vorschau

Seiten
- Leicht verständliche Sprache
- Domain Policy
Icons
- Bitte nicht lärmen
- Blaulicht
Templates
- Parkpickerl
- Public WLAN

Code

<wm-input type="combobox" toggleButton label="Suche" filter placeholder="Handbuch durchsuchen">
  <ul slot="options">
    <li>
      Seiten
      <ul>
        <li data-value="lvs">Leicht verständliche Sprache</li>
        <li data-value="domain">Domain Policy</li>
      </ul>
    </li>
    <li>
      Icons
      <ul>
        <li data-value="nolaerm">Bitte nicht lärmen</li>
        <li data-value="blaulicht">Blaulicht</li>
      </ul>
    </li>
    <li>
      Templates
      <ul>
        <li data-value="parkpickerl">Parkpickerl</li>
        <li data-value="wlan">Public WLAN</li>
      </ul>
    </li>
  </ul>
</wm-input>

Formular: Combobox Live OGD Adress-Suche

Daten bezogen von https://www.data.gv.at

Vorschau

Code

<p>
  <wm-input type="combobox" label="Adresse" id="ogdsuche" dataset="features"></wm-input>
</p>
<script>
const search = document.querySelector('#ogdsuche');
  search.addEventListener('wm-input', e => {
    search.getOptions(e.detail.value, `https://data.wien.gv.at/daten/OGDAddressService.svc/GetAddressInfo?Address=${e.detail.value}`).then((results) => {
      const options = [];
      if (results) {
        for (let i = 0; i < results.length; i++) {
          const row = results[i];
          options.push({
            text: `${row.properties.Adresse}, ${row.properties. Bezirk}. Bezirk`,
            children: [],
            value: `value-${i}`
          })
        }
        search.setOptions(options);
      }
    });
  });
</script>

Dev

Weitere Beispiele

Formular: Combobox mit Links

Die Liste kann statt Optionen auch Links beinhalten.

Vorschau

alle
Grundlagenerhebung
Konzepterstellung
Widmungsverfahren
Gemeinderatsbeschluss
In Umsetzung
Umgesetzt

Code

<wm-input type="combobox" label="Projektstand" toggleButton="toggleButton">
  <ul slot="options">
    <li>
      <a href="#">
        alle
      </a>
    </li>
    <li>
      <a href="#grundlagenerhebung">
        Grundlagenerhebung
      </a>
    </li>
    <li>
      <a href="#konzepterstellung">
        Konzepterstellung
      </a>
    </li>
    <li>
      <a href="#widmungsverfahren">
        Widmungsverfahren
      </a>
    </li>
    <li>
      <a href="#gemeinderatsbeschluss">
        Gemeinderatsbeschluss
      </a>
    </li>
    <li>
      <a href="#inumsetzung">
        In Umsetzung
      </a>
    </li>
    <li>
      <a href="#umgesetzt">
        Umgesetzt
      </a>
    </li>
  </ul>
</wm-input>

Formular: Input mit Auswahl-Event

Daten bezogen von https://www.data.gv.at

Vorschau

Die ausgewählte Adresse lautet: /

Code

<p>
  <wm-input type="combobox" label="Addresse" id="ogdsucheevent" dataset="features"></wm-input>
</p>
<p>Die ausgewählte Adresse lautet:
  <strong id="selected_address">/</strong>
</p>
<script>
  const searchEvent = document.querySelector('#ogdsucheevent');
  searchEvent.addEventListener('wm-input', e => {
    searchEvent.getOptions(e.detail.value, `https://data.wien.gv.at/daten/OGDAddressService.svc/GetAddressInfo?Address=${
      e.detail.value
    }`).then((results) => {
      const options = [];
      if (results) {
        for (let i = 0; i < results.length; i++) {
          const row = results[i];
          options.push({text: `${
              row.properties.Adresse
            }, ${
              row.properties.Bezirk
            }. Bezirk`, children: [], value: `value-${i}`})
        }
        searchEvent.setOptions(options);
      }
    });
  });
  searchEvent.addEventListener('wm-input-selected', e => {
    document.querySelector('#selected_address').textContent = e.detail.text;
  });
</script>

API

wm-input

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`showPasswordLabel`	Gibt den lokalisierten Text für den Button zum Umschalten der Passwortsichtbarkeit zurück. Kann durch Setzen der Eigenschaft showPasswordLabel überschrieben werden. Fällt auf den lokalisierten Standard "Info anzeigen" zurück, falls nicht gesetzt. Dies ist eine öffentliche Eigenschaft, die sich reaktiv bei Sprachwechsel aktualisiert.	`String`	`"Info anzeigen"`
`toggleOptionsLabel`	Gibt den lokalisierten Text für den Button zum Umschalten der Combobox-Optionen zurück. Kann durch Setzen der Eigenschaft toggleOptionsLabel überschrieben werden. Fällt auf den lokalisierten Standard "Vorschläge zeigen" zurück, falls nicht gesetzt. Dies ist eine öffentliche Eigenschaft, die sich reaktiv bei Sprachwechsel aktualisiert.	`String`	`"Vorschläge zeigen"`
`type`	Art des Eingabefelds	`'combobox'\|'date'\|'datetime-local'\|'email'\|'number'\|'password'\|'tel'\|'text'\|'time'\|'url'`	`"text"`
`dataset`	Combobox: Feld in der Response, das die Daten enthält, zum Beispiel bei OGD üblicherweise "features"	`Boolean`	`""`
`toggleButton`	Button in Combobox anzeigen	`Boolean`	`false`
`setvalue`	Combobox: Wert programmatisch setzen	`Boolean`	`""`
`pattern`	Regulärer Expressen RegEx für die Validierung	`String`	leer
`validator`	Validierungsfunktion	`Function`	`false`
`minlength`	Minimale Länge	`Number`	leer
`min`	Minimale Eingabe (z.B. Datum oder Zahl) Wird an das native weitergereicht (siehe render()). Für type="date" wird das Format YYYY-MM-DD empfohlen. Die Validierung erfolgt in _validateWithoutController().	`string\|undefined`	leer
`max`	Maximale Eingabe (z.B. Datum oder Zahl) Wird an das native weitergereicht (siehe render()). Für type="date" wird das Format YYYY-MM-DD empfohlen. Die Validierung erfolgt in _validateWithoutController().	`string\|undefined`	leer
`label`	Text für das Label	`String`	leer
`hint`	Text für den Hint	`String`	leer
`required`	Markiert Pflichtfelder	`Boolean`	`false`
`suppressError`	Unterdrückt die Anzeige von Fehlermeldungen	`Boolean`	`false`
`errormessage`	Fehlermeldung bei ungültiger Eingabe Diese Meldung wird direkt am Eingabefeld 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 geben Sie Ihren Namen bei \'Kontaktdaten\' ein' statt nur 'Dieses Feld ist erforderlich'.	`String`	`""`
`autocomplete`		`string`

Methoden

Eigenschaft	Optionen	Argumente
`hideOptions`	Liste in Combobox verbergen	Fokus auf Input legen (true) (`Boolean`)
`showError`	Shows an error message for this input	The error message to display (`string`)
`clearError`	Clears any error state from this input	/
`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