Formular: Input

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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