Handbuch wien.gv.at

Menü

Formular: Textfeld

Während das Pattern Input für kurze Eingaben gedacht ist, können in Textfeldern mehrzeilige Inhalte eingegeben und bearbeitet werden.

Varianten

Fortmuls: Textfeld als HTML

Vorschau

Kommentar

Code

<div>
  <label for="textarea">
    Kommentar
  </label>
  <textarea rows="7" id="textarea"></textarea>
</div>

Fortmuls: Textfeld als Webcomponent

Vorschau

Code

<wm-textarea label="Kommentar"></wm-textarea>

Dev

Interaktive Demo

label

placeholder

error

hint

maxlength

requiredText

required

hideAsterisk

disabled

Vorschau

Code

<wm-textarea data-demo-pattern="wm-textarea-preview" label="Beschreibung"></wm-textarea>

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

Vorschau

Beschreibung

Code

<div>
  <label for="textarea2">
    Beschreibung
  </label>
  <textarea rows="7" id="textarea2"></textarea>
</div>

Formular: Textfeld Pflichtfeld

Vorschau

Beschreibung *

Code

<div>
  <label for="textarea3">
    Beschreibung <abbr title="Pflichtfeld">*</abbr>
  </label>
  <textarea rows="7" id="textarea3" required></textarea>
</div>

Formular: Textfeld Pflichtfeld ohne Sternchen

Vorschau

Beschreibung (Pflichtfeld)

Code

<div>
  <label for="textarea4">
    Beschreibung
    (Pflichtfeld)
  </label>
  <textarea rows="7" id="textarea4" required></textarea>
</div>

Formular: Textfeld mit Beschreibung

Vorschau

Beschreibung

Format: DD.MM.YY

Code

<div>
  <label for="textarea5">
    Beschreibung
  </label>
  <div class="wm-forms-message" id="msg_textarea5">Format: DD.MM.YY</div>
  <textarea rows="7" id="textarea5" aria-describedby="msg_textarea5"></textarea>
</div>

Formular: Textfeld mit Fehler

Vorschau

Beschreibung

Bitte Datum angeben

Code

<div>
  <label for="textarea6">
    Beschreibung
  </label>

  <textarea rows="7" id="textarea6" aria-describedby="msg_textarea6" aria-invalid="true"></textarea>
  <div class="wm-forms-message" id="msg_textarea6">Bitte Datum angeben</div>
</div>

Webcomponent

Formular: Textfeld

Vorschau

Code

<wm-textarea label="Kommentar"></wm-textarea>

Formular: Textfeld Disabled

Vorschau

Code

<wm-textarea label="Kommentar" disabled></wm-textarea>

Formular: Textfeld als Pflichtfeld

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

Vorschau

Code

<wm-textarea label="Kommentar" required="required"></wm-textarea>

Formular: Textfeld als Pflichtfeld ohne Sternchen

Vorschau

Code

<wm-textarea label="Kommentar" required="required" hideAsterisk="hideAsterisk"></wm-textarea>

Formular: Textfeld als Pflichtfeld ohne Sternchen mit benutzerdefiniertem Text

Vorschau

Code

<wm-textarea label="Kommentar" required="required" requiredText="Bitte angeben" hideAsterisk="hideAsterisk"></wm-textarea>

Formular: Textfeld mit Beschreibung

Vorschau

Code

<wm-textarea label="Kommentar" hint="Beschreiben Sie Ihr Anliegen."></wm-textarea>

Formular: Textfeld mit Fehler

Vorschau

Code

<wm-textarea label="Kommentar" error="Dieses Feld darf nicht leer sein."></wm-textarea>

Formular: Textfeld mit Beschreibung und Fehler

Vorschau

Code

<wm-textarea label="Kommentar" error="Dieses Feld darf nicht leer sein." hint="Beschreiben Sie Ihr Anliegen."></wm-textarea>

Events (siehe Konsole)

Vorschau

Code

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

Textfelder mit Hervorhebung

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

Formular: Textfeld mit Beschreibung

Vorschau

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

Code

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

Formular: Textfeld mit Fehler

Vorschau

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

Code

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

Formular: Textfeld mit Infotext

Vorschau

Code

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

API

Abhängigkeiten

HTML

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

JavaScript

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

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`disabled`	Disabled	`Boolean`	`false`
`rows`		`number`	`7`
`pattern`		`string`	leer
`hasError`	Whether the component has a validation error	`Boolean`	`false`
`value`		`string`	`''`
`defaultValue`	Default value of the component	`String`	`''`
`showErrors`	Whether to show validation errors immediately	`boolean`	`false`
`validate`	Whether to validate on input	`boolean`	`false`
`errormessage`	Fehlermeldung bei ungültiger Eingabe Diese Meldung wird direkt am Textarea-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 geben Sie eine Beschreibung bei 'Projektinformationen' ein" statt nur "Dieses Feld ist erforderlich".	`String`	`""`
`error`	Current error message	`String`	`""`
`minlength`	Minimale Länge	`Number`	leer
`maxlength`	Maximale Länge	`Number`	leer
`label`	Text für das Label	`String`	leer
`hint`	Text für den Hint	`String`	leer
`required`	Markiert Pflichtfelder	`Boolean`	`false`
`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`
`styles`		`array`	`[globalStyles, formStyles, formItemStyles]`
`announcementText`	Text, der angekündigt wird, wenn Optionen angezeigt werden	`String`	`"Suchvorschläge werden angezeigt. Verwenden Sie Pfeiltasten um zu navigieren"`
`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

Methoden

Eigenschaft	Optionen	Argumente
`formResetCallback`	Form reset callback - called by parent forms Provides standard reset behavior	/
`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