Field (Formularfeld)

Neu in Bootstrap v6.0.0

Ein universeller Layout-Wrapper für Formularelemente: Label, Beschreibung und Validierungsfeedback werden per CSS Grid automatisch richtig platziert.

Mit .form-field bekommt jedes Eingabeelement Abstände, Ausrichtung und Struktur – egal ob Textfeld, Auswahlliste, Checkbox, Radio oder Switch. Bei Checkboxen, Radios und Switches wechselt das Layout selbstständig auf zwei Spalten.

  • Einspaltig: Für Textfelder, Selects, Textareas, Range, Input-Gruppen und Adorn-Felder.
  • Zweispaltig: Automatisch bei .check, .radio oder .switch als direktem Kind.
  • Gruppen: Mehrere Felder mit .form-group unter einem gemeinsamen Label bündeln.
  • Validierung: Client- und serverseitiges Feedback wird für alle Feldtypen korrekt angeordnet.

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

Funktionsweise

Der Wrapper .form-field ordnet Label, Formularelement, Beschreibung und Validierungsfeedback per CSS Grid an. Im einfachsten Fall packst du Label, Input und Hilfetext einfach hinein.

Wir geben deine E-Mail-Adresse niemals weiter. 
<div class="form-field">
  <label for="fieldText" class="form-label">E-Mail-Adresse</label>
  <input type="email" class="form-control" id="fieldText" placeholder="name@example.com">
  <div class="form-text">
    Wir geben deine E-Mail-Adresse niemals weiter.
  </div>
</div>
  • Standard-Layout: einspaltiges Grid, alles steht untereinander. Passend für Textfelder, Selects, Textareas, Range, Input-Gruppen und Adorn-Felder.
  • Zweispaltiges Layout: wird per :has() automatisch aktiv, sobald .check, .radio oder .switch direktes Kind ist. Das Steuerelement sitzt in Spalte 1, Label, Beschreibung und Feedback in Spalte 2.
  • Label darüber: Ein zusätzliches .form-label neben Check, Radio oder Switch überspannt beide Spalten und steht oberhalb.
  • Gruppierte Elemente: Mehrere .form-field lassen sich unter einem gemeinsamen Label mit gemeinsamer Beschreibung und Validierung zusammenfassen.

Beispiele

Select

Auswahllisten (<select>) funktionieren genauso.

<div class="form-field">
  <label for="fieldSelect" class="form-label">Land</label>
  <select class="form-control" id="fieldSelect">
    <option selected>Bitte wählen…</option>
    <option value="1">Deutschland</option>
    <option value="2">Österreich</option>
    <option value="3">Schweiz</option>
  </select>
</div>

Textarea

Auch mit <textarea> klappt es ohne Anpassung. Die Beschreibung ist optional.

Gib bitte alle wichtigen Details an. 
<div class="form-field">
  <label for="fieldTextarea" class="form-label">Nachricht</label>
  <textarea class="form-control" id="fieldTextarea" rows="3"></textarea>
  <div class="form-text">
    Gib bitte alle wichtigen Details an.
  </div>
</div>

Checkbox

Ist ein .check direktes Kind, wechselt das Grid auf zwei Spalten: links die Checkbox, rechts das Label.

<div class="form-field">
  <input type="checkbox" id="fieldCheck" class="check" />
  <label for="fieldCheck">Angemeldet bleiben</label>
</div>

Radio

Radios nutzen dasselbe zweispaltige Layout. Jedes Paar aus Radio und Label bekommt ein eigenes .form-field.

<div class="form-field">
  <input type="radio" id="fieldRadio1" class="radio" name="fieldRadioGroup" />
  <label for="fieldRadio1">Option eins</label>
</div>
<div class="form-field">
  <input type="radio" id="fieldRadio2" class="radio" name="fieldRadioGroup" />
  <label for="fieldRadio2">Option zwei</label>
</div>

Gruppiert

Mit .form-group fasst du mehrere .form-field unter einem gemeinsamen Label zusammen. Die Gruppe sorgt für einheitliche Abstände, jedes innere Feld behält sein eigenes Layout.

Wähle deine bevorzugte Versandgeschwindigkeit.
<div class="form-group">
  <label class="form-label">Versandart</label>
  <div class="form-field">
    <input type="radio" id="fieldGroupRadio1" class="radio" name="fieldGroupRadio" required />
    <label for="fieldGroupRadio1">Standard</label>
  </div>
  <div class="form-field">
    <input type="radio" id="fieldGroupRadio2" class="radio" name="fieldGroupRadio" required />
    <label for="fieldGroupRadio2">Express</label>
  </div>
  <small class="form-text">Wähle deine bevorzugte Versandgeschwindigkeit.</small>
</div>

Gruppen als Karten

.form-field-card an den inneren Feldern erzeugt eine Kartenoptik, die die gewählte Option hervorhebt. Mit engeren Abständen im Wrapper wirkt das Ganze kompakter.

9 $/Monat – für Einzelpersonen.
29 $/Monat – für Teams.
<div class="form-group">
  <label class="form-label">Tarif wählen</label>
  <div class="vstack gap-1">
    <div class="form-field form-field-card">
      <input type="radio" id="fieldRadioGroup1" class="radio" name="fieldRadioGrouped" checked />
      <div class="form-field-content">
        <label for="fieldRadioGroup1">Basic</label>
        <small class="form-text">9 $/Monat – für Einzelpersonen.</small>
      </div>
    </div>
    <div class="form-field form-field-card">
      <input type="radio" id="fieldRadioGroup2" class="radio" name="fieldRadioGrouped" />
      <div class="form-field-content">
        <label for="fieldRadioGroup2">Pro</label>
        <small class="form-text">29 $/Monat – für Teams.</small>
      </div>
    </div>
  </div>
</div>

Switch

Auch Switches lösen das zweispaltige Grid aus.

<div class="form-field">
  <div class="switch">
    <input type="checkbox" id="fieldSwitch" role="switch" switch>
  </div>
  <label for="fieldSwitch">Benachrichtigungen aktivieren</label>
</div>

Combobox

Comboboxen, Datepicker, OTP-Felder und andere Formular-Komponenten werden ebenfalls unterstützt.

Wähle einen Eintrag aus dem Menü.
<div class="form-field">
  <label>Combobox</label>
  <button class="form-control combobox-toggle" type="button"
      data-bs-toggle="combobox"
      data-bs-name="option"
      data-bs-placeholder="Eintrag wählen…">
    <span class="combobox-value">Eintrag wählen…</span>
    <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
  </button>
  <div class="menu">
    <button class="menu-item" type="button" data-bs-value="1">Option eins</button>
    <button class="menu-item" type="button" data-bs-value="2">Option zwei</button>
    <button class="menu-item" type="button" data-bs-value="3">Option drei</button>
  </div>
  <div class="form-text">Wähle einen Eintrag aus dem Menü.</div>
</div>

Label darüber

Braucht eine Checkbox, ein Radio oder ein Switch eine Überschrift, ergänzt du ein .form-label. Es überspannt automatisch beide Spalten und steht in einer eigenen Zeile über dem Element.

Bitte vor der Zustimmung lesen.
<div class="form-field">
  <label class="form-label">AGB</label>
  <input type="checkbox" id="fieldOverheadCheck" class="check" required />
  <div class="form-field-content">
    <label for="fieldOverheadCheck">Ich stimme den AGB zu</label>
    <small class="form-text">Bitte vor der Zustimmung lesen.</small>
  </div>
</div>

Beschreibungen

Setze ein <small class="form-text"> hinter das Label und umschließe beides mit .form-field-content – so stimmen Abstand und Ausrichtung.

Wir schicken dir wöchentlich eine Übersicht der Neuigkeiten.
Lieferung in 5–7 Werktagen.
3–20 Zeichen, nur Buchstaben und Zahlen.
<div class="form-field">
  <input type="checkbox" id="fieldCheckDesc" class="check" />
  <div class="form-field-content">
    <label for="fieldCheckDesc">Updates abonnieren</label>
    <small class="form-text">Wir schicken dir wöchentlich eine Übersicht der Neuigkeiten.</small>
  </div>
</div>
<div class="form-field">
  <input type="radio" id="fieldRadioDesc" class="radio" name="fieldRadioDesc" />
  <div class="form-field-content">
    <label for="fieldRadioDesc">Standardversand</label>
    <small class="form-text">Lieferung in 5–7 Werktagen.</small>
  </div>
</div>
<div class="form-field">
  <label for="fieldTextDesc" class="form-label">Benutzername</label>
  <input type="text" class="form-control" id="fieldTextDesc">
  <small class="form-text">3–20 Zeichen, nur Buchstaben und Zahlen.</small>
</div>

Validierung

Validierungsfeedback (.invalid-feedback, .valid-feedback) wird in .form-field für alle Feldtypen korrekt angeordnet.

Clientseitig

Mit data-bs-validate am <form> aktivierst du die Darstellung über :user-invalid. Diese Pseudoklassen greifen erst, nachdem jemand mit dem Feld interagiert hat. Sollen gültige Felder ebenfalls hervorgehoben werden, nimm data-bs-validate="valid". novalidate unterdrückt die nativen Browser-Tooltips, die Constraint-Validation-API bleibt nutzbar.

Bitte gib eine gültige E-Mail-Adresse ein.
Sieht gut aus!
Du musst vor dem Absenden zustimmen.
<form class="vstack gap-3" data-bs-validate novalidate>
  <div class="form-field flex-1">
    <label for="fieldValidateEmail" class="form-label">E-Mail-Adresse</label>
    <input type="email" class="form-control" id="fieldValidateEmail" required>
    <div class="invalid-feedback">Bitte gib eine gültige E-Mail-Adresse ein.</div>
    <div class="valid-feedback">Sieht gut aus!</div>
  </div>
  <div class="form-field">
    <input type="checkbox" id="fieldValidateCheck" class="check" required>
    <div class="form-field-content">
      <label for="fieldValidateCheck">Den AGB zustimmen</label>
      <div class="invalid-feedback">Du musst vor dem Absenden zustimmen.</div>
    </div>
  </div>
  <button class="btn-solid theme-primary align-self-start" type="submit">Absenden</button>
</form>

Serverseitig

Für serverseitige Validierung setzt du .is-invalid oder .is-valid direkt am Steuerelement. Das Feedback ist dann sofort beim Laden sichtbar.

Bitte gib eine gültige E-Mail-Adresse ein.
Sieht gut aus!
Du musst vor dem Absenden zustimmen.
Dieses Feld ist erforderlich.
<div class="form-field mb-3">
  <label for="fieldServerEmail" class="form-label">E-Mail-Adresse</label>
  <input type="email" class="form-control is-invalid" id="fieldServerEmail" value="keine-email" required>
  <div class="invalid-feedback">Bitte gib eine gültige E-Mail-Adresse ein.</div>
</div>
<div class="form-field mb-3">
  <label for="fieldServerName" class="form-label">Vollständiger Name</label>
  <input type="text" class="form-control is-valid" id="fieldServerName" value="Mark Otto" required>
  <div class="valid-feedback">Sieht gut aus!</div>
</div>
<div class="form-field mb-3">
  <input type="checkbox" id="fieldServerCheck" class="check is-invalid" required>
  <label for="fieldServerCheck">Den AGB zustimmen</label>
  <div class="invalid-feedback">Du musst vor dem Absenden zustimmen.</div>
</div>
<div class="form-field mb-3">
  <div class="switch">
    <input type="checkbox" id="fieldServerSwitch" role="switch" switch class="is-invalid">
  </div>
  <label for="fieldServerSwitch">Marketing-E-Mails akzeptieren</label>
  <div class="invalid-feedback">Dieses Feld ist erforderlich.</div>
</div>

Die Sass-Variablen findest du in der Originaldokumentation.