Form adorn (Feld-Ergänzungen)

Neu in Bootstrap v6.0.0

Eingabefelder mit Icons, Texten und mehr ergänzen – über einen eigenen Wrapper, der Styling und Positionierung übernimmt.

Form adorn kombiniert .form-control am Wrapper mit einem transparenten „Ghost-Input“. So sitzen Lupe, Währungszeichen oder Domain-Endung optisch im Feld, während das eigentliche Eingabefeld unverändert bleibt. JavaScript ist nicht nötig.

  • Wrapper:<label class="form-control form-adorn"> – Klick irgendwo im Feld fokussiert den Input.
  • Ghost-Input:.form-ghost übernimmt die Optik vom Wrapper.
  • Icons und Texte:.form-adorn-icon und .form-adorn-text.
  • Position: am Anfang oder mit .form-adorn-end am Ende.
  • Barrierefrei: Ergänzungen per aria-hidden="true" aus dem zugänglichen Namen heraushalten.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Funktionsweise

Ein Wrapper bekommt sowohl .form-control als auch .form-adorn. .form-control liefert Rahmen, Hintergrund, Innenabstand und Fokuszustände, .form-adorn richtet per Flexbox die Ergänzungen neben einem „Ghost-Input“ aus. Dieses Feld mit .form-ghost ist transparent, hat praktisch kein eigenes Styling und übernimmt die Optik vom Wrapper.

Nimm als Wrapper ein <label>. Da der Wrapper wie ein Eingabefeld aussieht, klicken Nutzer auch auf Icon, Text oder Rand und erwarten, dass das Feld den Fokus bekommt. Ein Label erledigt das automatisch – ganz ohne JavaScript.

Versieh die Ergänzungen mit aria-hidden="true". Sonst wird z. B. ein $ Teil des zugänglichen Namens, und der Screenreader liest „Betrag $“ statt „Betrag“. Ergänzungen sind dekorativ; alles Wichtige gehört ins sichtbare Label oder in eine .form-text-Beschreibung.

Mehr zu .form-control und .form-ghost findest du in der Doku zu Form control.

Beispiel

Icon und .form-ghost-Input kommen in ein <label> mit .form-control und .form-adorn. Steht die Ergänzung im DOM vor dem Input, erscheint sie am Anfang (in LTR links).

<label class="form-control form-adorn">
  <div class="form-adorn-icon" aria-hidden="true">
    <svg class="bi" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>
  </div>
  <input type="search" class="form-ghost" placeholder="Suchen...">
</label>

Mit .form-adorn-end rückt die Ergänzung ans Ende. Die DOM-Reihenfolge bleibt gleich, gedreht wird nur per CSS.

<label class="form-control form-adorn form-adorn-end">
  <div class="form-adorn-icon" aria-hidden="true">
    <svg class="bi" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/></svg>
  </div>
  <input type="email" class="form-ghost" placeholder="du@example.com">
</label>

Mit Labels

Für einen sichtbaren Feldnamen setzt du ein zweites Label außerhalb des Wrappers und verknüpfst es per for mit dem Input. So behält das Feld seinen Namen, auch wenn du den Wrapper später änderst.

<div>
  <label for="searchInput" class="form-label">Suche</label>
  <label class="form-control form-adorn">
    <div class="form-adorn-icon" aria-hidden="true">
      <svg class="bi" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>
    </div>
    <input type="search" class="form-ghost" id="searchInput" placeholder="Suchen...">
  </label>
</div>
<div>
  <label for="emailInput" class="form-label">E-Mail-Adresse</label>
  <label class="form-control form-adorn form-adorn-end">
    <div class="form-adorn-icon" aria-hidden="true">
      <svg class="bi" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/></svg>
    </div>
    <input type="email" class="form-ghost" id="emailInput" placeholder="du@example.com">
  </label>
</div>

Mit Formularfeld

In einem .form-field kombinierst du das Adorn-Feld mit Label und Beschreibung.

Durchsucht alle Seiten und Beiträge.
<div class="form-field">
  <label for="adornField" class="form-label">Suche</label>
  <label class="form-control form-adorn">
    <div class="form-adorn-icon" aria-hidden="true">
      <svg class="bi" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>
    </div>
    <input type="search" class="form-ghost" id="adornField" placeholder="Suchen...">
  </label>
  <small class="form-text">Durchsucht alle Seiten und Beiträge.</small>
</div>

Text-Ergänzungen

Für Währungszeichen, Einheiten, Domain-Endungen und andere Texte nimmst du .form-adorn-text. Die Breite passt sich automatisch dem Inhalt an.

<label class="form-control form-adorn">
  <span class="form-adorn-text" aria-hidden="true">$</span>
  <input type="text" class="form-ghost" placeholder="0.00">
</label>
<label class="form-control form-adorn form-adorn-end">
  <span class="form-adorn-text" aria-hidden="true">USD</span>
  <input type="text" class="form-ghost" placeholder="Betrag">
</label>
<label class="form-control form-adorn">
  <span class="form-adorn-text" aria-hidden="true">https://</span>
  <input type="text" class="form-ghost" placeholder="example.com">
</label>
<label class="form-control form-adorn form-adorn-end">
  <span class="form-adorn-text" aria-hidden="true">@example.com</span>
  <input type="text" class="form-ghost" placeholder="benutzername">
</label>

Größen

Die Größe steuerst du am Wrapper über die Größenklassen von .form-control (.form-control-sm, .form-control-lg).

<label class="form-control form-control-sm form-adorn">
  <div class="form-adorn-icon" aria-hidden="true">
    <svg class="bi" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>
  </div>
  <input type="text" class="form-ghost" placeholder="Kleines Feld">
</label>
<label class="form-control form-adorn">
  <div class="form-adorn-icon" aria-hidden="true">
    <svg class="bi" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>
  </div>
  <input type="text" class="form-ghost" placeholder="Standardfeld">
</label>
<label class="form-control form-control-lg form-adorn">
  <div class="form-adorn-icon" aria-hidden="true">
    <svg class="bi" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>
  </div>
  <input type="text" class="form-ghost" placeholder="Großes Feld">
</label>

Die CSS-Variablen findest du in der Originaldokumentation.