Formular: Input

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

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

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

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

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

<wm-input type="number" label="Kundennummer" hint="Geben Sie Ihre 10-stellige Kundennummer ein.
      "></wm-input>

<wm-input type="number" label="Kundenummer" hint="Geben Sie Ihre 10-stellige Kundennummer ein.">
  <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 label="Vorname" maxlength="4"></wm-input>

<wm-input type="combobox" label="Projektstand" toggleButton="toggleButton" filter="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="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">
        Die Eingabe kann nach dem Absenden nicht mehr geändert werden.
      </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="number" label="Anzahl Tage"></wm-input>
    <wm-notification type="info">
      <h3>Voraussichtliche Tagesgebühr</h3>
      <p>
        <strong>Betrag 78,00 Euro</strong>
        <br>
          Hinweis: Der tatsächliche Betrag kann sich durch weitere Eingaben noch verändern.
        </p>
      </wm-notification>

<wm-input type="text" label="Kundennummer" info="Die Kundennummer finden Sie auf Ihrer letzten Rechnung."></wm-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="required"></div>

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

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

<div>
        <label for="kundennummer">
          Kundennummer
        </label>
        <div class="wm-forms-message" id="text_kundennummer">Geben Sie Ihre 10-stellige Kundennummer ein.</div>
        <input type="text" id="kundennummer" aria-describedby="text_kundennummer"/>
      </div>

<div>
        <label for="kundenummer2">
          Kundennummer
        </label>
        <div class="wm-forms-message" id="text_kundennummer2">Geben Sie Ihre 10-stellige Kundennummer ein.</div>
        <input
          type="text"
          id="kundenummer2"
          aria-describedby="text_kundennummer2 msg_kundenummer2"
          required="required"
          aria-invalid="true"/>
        <div class="wm-forms-message" id="msg_kundenummer2">Bitte Kundennummer angeben</div>
      </div>