Formular: Input

Das Pattern Input ermöglicht es Nutzer*innen Text zum Beispiel in Formularen und Suchfeldern einzugeben.

Dev

Interaktive Demo

type

label

placeholder

error

hint

maxlength

requiredText

required

hideAsterisk

disabled

Vorschau

Code

<wm-input type="text" data-demo-pattern="wm-input-preview" label="Vorname"></wm-input>

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

Vorschau

Vorname

Code

<div>
  <label for="input-text">
      Vorname
  </label>
  <input type="text" id="input-text">
</div>

Formular: Eingabefeld Pflichtfeld

Vorschau

Vorname *

Code

<div>
  <label for="input-text3">
    Vorname
    <abbr title="Pflichtfeld">*</abbr>
  </label>
  <input type="text" id="input-text3" required>
</div>

Formular: Pflichtfeld ohne Sternchen

Vorschau

Vorname (Pflichtfeld)

Code

<div>
  <label for="input-text4">
    Vorname
    (Pflichtfeld)
  </label>
  <input type="text" id="input-text4" required>
</div>

Formular: Eingabefeld mit Beschreibung

Vorschau

Datum

Format: DD.MM.YY

Code

<div>
  <label for="date">
    Datum
  </label>

  <div class="wm-forms-message" id="msg_date">Format: DD.MM.YY</div>
  <input type="date" id="date" aria-describedby="msg_date" />
</div>

Formular: Eingabefeld mit Fehler

Vorschau

Datum

Bitte Datum angeben

Code

<div>
  <label for="date2">
    Datum
  </label>

  <input type="date" id="date2" aria-describedby="msg_date2" required aria-invalid="true"/>
  <div class="wm-forms-message" id="msg_date2">Bitte Datum angeben</div>
</div>

Formular: Eingabefeld mit Beschreibung und Fehler

Vorschau

Datum

Format: DD.MM.YY

Bitte Datum angeben

Code

<div>
  <label for="date2">
    Datum
  </label>

  <div class="wm-forms-message" id="msg_date4">Format: DD.MM.YY</div>
  <input type="date" id="date2" aria-describedby="msg_date3 msg_date4" required aria-invalid="true"/>
  <div class="wm-forms-message" id="msg_date3">Bitte Datum angeben</div>
</div>

Webcomponent

Formular: Eingabefeld

Vorschau

Code

<wm-input label="Vorname"></wm-input>

Formular: Eingabefeld Pflichtfeld

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

Vorschau

Code

<wm-input label="Vorname" required></wm-input>

Formular: Eingabefeld Pflichtfeld ohne Sternchen

* Wird automatisch durch die Präsenz des hideAsterisk Attributs ersetzt.

Vorschau

Code

<wm-input label="Vorname" required hideAsterisk></wm-input>

Formular: Pflichtfeld ohne Sternchen mit benutzerdefiniertem Text

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

Vorschau

Code

<wm-input label="Vorname" required requiredText="Bitte angeben" hideAsterisk></wm-input>

Formular: Eingabefeld Passwort

Der Button blendet das Passwort ein- und aus.

Vorschau

Code

<wm-input type="password" label="Passwort" autocomplete="current-password"></wm-input>

Formular: Eingabefeld mit Beschreibung

Vorschau

Code

<wm-input type="date" label="Datum" hint="Format: DD.MM.YY"></wm-input>

Formular: Eingabefeld mit Fehler

Vorschau

Code

<wm-input type="date" label="Datum" error="Bitte Datum angeben"></wm-input>

Formular: Eingabefeld mit Beschreibung und Fehler

Vorschau

Code

<wm-input type="date" label="Datum" error="Bitte Datum angeben" hint="Format: DD.MM.YY"></wm-input>

Formular: Eingabefeld mit maximaler Zeichenlänge

Die verfügbare Zeichenanzahl wird live angezeigt und für Screen Reader Nutzer*innen angekündigt.

Vorschau

Code

<wm-input label="Vorname" maxlength="4"></wm-input>

Formular: Combobox

Weitere Beispiele finden Sie im Pattern Combobox.

Vorschau

alle
Grundlagenerhebung
Konzepterstellung
Widmungsverfahren
Gemeinderatsbeschluss
In Umsetzung
Umgesetzt

Code

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

Formular: Eingabefeld mit hinterlegten Events (siehe Konsole)

Vorschau

Code

<wm-form>
    <form>
      <wm-input type="email" label="E-Mail" id="events" required></wm-input>
      <button>Send</button>
    </form>
  </wm-form>
  <script>
    const input = document.querySelector('#events');
    input.addEventListener('wm-focus', e => {
      console.log(e.type)
      console.log(e.detail)
    })
    input.addEventListener('wm-input', e => {
      console.log(e.type)
      console.log(e.detail)
    })
    input.addEventListener('wm-change', e => {
      console.log(e.type)
      console.log(e.detail)
    })
    input.addEventListener('wm-blur', e => {
      console.log(e.type)
      console.log(e.detail)
    })
    input.addEventListener('wm-invalid', e => {
      console.log(e.type)
      console.log(e.detail)
    })
  </script>

Eingabefelder mit Hervorhebung

Hinweise, Warnungen und Fehler können einfach oder prominent, mit Hintergrundfarbe und Innenabstand, dargestellt werden.

Formular: Eingabefeld mit Beschreibung

Vorschau

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

Code

<wm-input type="date" label="Datum">
      <div slot="hint">
        <wm-highlight color="wasserblau-light">
          Das Besondere an dieser Beschreibung ist,<br>
          dass HTML übergeben wird.
        </wm-highlight>
      </div>
    </wm-input>

Formular: Eingabefeld mit Warnung

Vorschau

Hier steht ein Warnhinweis.

Code

<wm-input type="date" label="Datum">
      <div slot="hint">
        <wm-highlight color="goldgelb-light">
          Hier steht ein Warnhinweis.
        </wm-highlight>
      </div>
    </wm-input>

Formular: Eingabefeld mit Fehler

Vorschau

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

Code

<wm-input type="date" label="Datum">
      <div slot="error">
        <wm-highlight color="morgenrot-light">
          Das Besondere an diesem Fehler ist,<br>
          dass HTML übergeben wird.
        </wm-highlight>
      </div>
    </wm-input>

Formular: Eingabefeld mit Infotext

Für das Verständnis unkritischer Hinweistexte kann hinter einem Button versteckt werden.

Vorschau

Code

<wm-input type="date" label="Datum" info="Bitte Datum angeben"></wm-input>

API

Abhängigkeiten

HTML

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

JavaScript

import { Input } from './wienermelange/assets/js/components/Input/Input.js';
    import { Button } from './wienermelange/assets/js/components/Button/Button.js';
    import { Icon } from './wienermelange/assets/js/components/Icon/Icon.js';
    import { Stack } from './wienermelange/assets/js/components/Stack/Stack.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`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`	`""`
`disabled`	Gibt an, ob das Element deaktiviert ist oder nicht	`Boolean`	`false`
`pattern`	Regulärer Expressen RegEx für die Validierung	`String`	leer
`hasError`	Gibt an, ob das Element einen Fehler hat Dies ist ein Statusattribut, das anzeigt, ob aktuell ein Validierungsfehler vorliegt. Es wird auf true gesetzt, wenn die Validierung fehlschlägt, und auf false zurückgesetzt, wenn die Validierung erfolgreich ist oder das Formular zurückgesetzt wird.	`Boolean`	`false`
`showErrors`	Steuert die Anzeige von Fehlermeldungen Im Gegensatz zu 'hasError' steuert dieses Attribut, ob Fehlermeldungen angezeigt werden sollen. Wenn auf true gesetzt, werden Validierungsfehler sofort angezeigt, ohne auf eine Formularübermittlung zu warten. Wird typischerweise vom übergeordneten wm-form Element gesteuert.	`boolean`	`false`
`validate`	Aktiviert die Validierung bei Eingabe Wenn auf true gesetzt, werden Eingaben sofort validiert und Fehler entsprechend angezeigt, ohne auf eine Formularübermittlung zu warten. Wird typischerweise vom übergeordneten wm-form Element gesteuert.	`boolean`	`false`
`value`	Aktueller Wert des Eingabefelds	`string`	`''`
`defaultValue`	Standardwert für das Zurücksetzen des Formulars	`String`	`''`
`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`	`""`
`_initialValue`	Initial value for reset functionality	`String`	`''`
`_errorController`			`new ErrorStateController(this)`
`validator`		`function`
`properties`		`object`	`{ ...superClass.properties, _initialValue: { state: true }, defaultValue: { attribute: false }, _componentState: { state: true }, _previousState: { state: true }, disabled: { type: Boolean, reflect: true }, hasError: { type: Boolean, reflect: true }, error: { type: String }, validate: { type: Boolean, reflect: true }, showErrors: { type: Boolean, reflect: true } }`
`STATES`
`error`	Current error message	`String`	`''`

`styles`		`array`	`[globalStyles, formStyles, formItemStyles]`
`_output`
`announcementText`	Text, der angekündigt wird, wenn Optionen angezeigt werden	`String`	`"Suchvorschläge werden angezeigt. Verwenden Sie Pfeiltasten um zu navigieren"`
`maxlength`	Maximale Zeichenanzahl, die eingegeben werden darf	`Number`	leer
`placeholder`	placeholder-Attribut in HTML	`String`	leer
`search`	Art des Suchfeldes	`'hidden'\|'visible'\|'hiddenmobile'`	leer
`size`	size-Attribute in HTML	`String`	leer
`filter`	Liste in Combobox beim Tippen filtern	`Boolean`	`false`
`hideMaxlength`	Verfügbare Zeichenanzahl verbergen	`Boolean`	`false`
`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"`
`info`		`string`	leer
`_infoOpen`		`boolean`	`false`

Methoden

Eigenschaft	Optionen	Argumente
`_handleChange`
`_handleBlur`
`_handleFocus`
`_handleKeyDown`
`_handleKeyUp`
`formResetCallback`	Reset the component to its initial state (called by forms)	/
`reportValidity`		/
`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	/
`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`)
`showOptions`	Liste in Combobox anzeigen	/

Events

Event	Beschreibung	Rückgabewert

CSS API

Property	Beschreibung
`--input-combobox-background-color`	Hintergrund Combobox
`--input-combobox-background-color--active`	Hintergrund hervorgehobenes Element

Kontakt

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

handbuch@ma53.wien.gv.at