Textfeld

Textfelder ermöglichen die Erfassung von Benutzereingaben und bieten durch klare visuelle Zustände unmittelbares Feedback für eine reibungslose Interaktion. Sie sind essenziell für die Kommunikation zwischen Benutzer und System und gewährleisten durch konsistentes Design eine benutzerfreundliche und barrierefreie Nutzung.

Textfeld

Textfelder passen sich automatisch der Breite ihres Inhalts an und können entweder die volle oder 3/4 Breite einnehmen. Für kürzere Informationen wie die PLZ, Geburtsdatum oder Anrede ist die halbe Breite vorgesehen. Zur Kennzeichnung von Pflichtfeldern wird auf die Verwendung von * verzichtet. Stattdessen werden optionale Felder direkt nach dem Label durch die Ergänzung von ‚(optional)‘ gekennzeichnet.

Die Validierung erfolgt stets im Formular, beispielsweise beim Klicken auf den Senden-Button. Fehler sollten niemals während des Fokuserhalts oder -verlusts eines Feldes angezeigt werden. Bei auftretenden Fehlern navigiert das Formular automatisch zum Anfang. Dort werden alle fehlerhaften Formularelemente markiert, begleitet von entsprechenden Fehlerbeschreibungen.

Pflichtfeld

Das <input> Element enthält ein required Attribut.

<div class="form-group element-text">
  <div class="form-floating">
    <input
      type="text"
      class="form-control"
      id="textinput"
      name="textinput"
      placeholder="Placeholder"
      required
    />
    <label for="textinput">Label</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Optional

<div class="form-group element-text">
  <div class="form-floating">
    <input
      type="text"
      class="form-control"
      id="textinput-2"
      name="textinput-2"
      placeholder="Placeholder"
    />
    <label for="textinput-2">Label</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Vorbefüllt

Das <input> Element enthält ein befülltes value Attribut.

<div class="form-group element-text">
  <div class="form-floating">
    <input
      type="text"
      class="form-control"
      id="textinput-3"
      name="textinput-3"
      placeholder="Placeholder"
      value="Vorbefüllte Eingabe"
    />
    <label for="textinput-3">Label</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Disabled

Das <input> Element enthält ein disabled Attribut.

<div class="form-group element-text">
  <div class="form-floating">
    <input
      type="text"
      class="form-control"
      id="textinput-4"
      name="textinput-4"
      placeholder="Placeholder"
      disabled
    />
    <label for="textinput-4">Label</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Textfelder können optional mit einem Tooltip ergänzt werden. Dieser wird durch ein Icon gekennzeichnet. Der Text kann sowohl mehrzeilig sein, als auch einen Link enthalten und ist bei Hover ersichtlich.

<div class="form-group element-tooltip">
  <svg
    class="icon icon-info"
    data-bs-custom-class="wko-tooltip"
    data-bs-toggle="tooltip"
    data-bs-html="true"
    data-bs-title="Tooltip, dieser kann sowohl mehrzeilig sein, als auch einen <a href='#'>Link</a> enthalten."
  >
    <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-info"></use>
  </svg>
  <div class="form-floating">
    <input
      type="text"
      class="form-control"
      id="textinput-5"
      name="textinput-5"
      placeholder="Placeholder"
    />
    <label for="textinput-5">Label</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Infotext

Textfelder können optional mit einem Infotext unterhalb des Eingabefeldes ergänzt werden.

<div class="form-group element-text">
  <div class="form-floating">
    <input
      type="text"
      class="form-control"
      id="textinput-6"
      name="textinput-6"
      placeholder="Placeholder"
    />
    <label for="textinput-6">Label</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
  <p class="infotext">Infotext ergänzend zum Eingabefeld</p>
</div>