Textarea

Textareas haben standardmäßig die doppelte Höhe eines regulären Eingabefeldes. Größenanpassung: Textareas können von Nutzern in der Höhe flexibel vergrößert oder verkleinert werden, um längere Texte bequem einzugeben.

Pflichtfeld

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

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

Optional

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

Vorbefüllt

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

Disabled

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

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

Textareas 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="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 on top kann auch ein zwei- oder dreizeilig und zu dem Text kann auch HTML bzw. ein <a href='#'>Textlink</a> stehen."
  >
    <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-info"></use>
  </svg>
  <div class="form-floating form-group">
    <textarea
      class="form-control"
      id="textarea-5"
      name="textarea-5"
      placeholder="Placeholder"
    ></textarea>
    <label for="textarea-5">Label</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Infotext

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

<div class="element-textarea floating-label">
  <div class="form-floating form-group">
    <textarea
      class="form-control"
      id="textarea-6"
      name="textarea-6"
      placeholder="Placeholder"
    ></textarea>
    <label for="textarea-6">Label</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
  <p class="infotext">
    Infotext Ergänzung zum Inhalt, Infotext Ergänzung zum Inhalt, Infotext
    Ergänzung zum Inhalt
  </p>
</div>