Form Field

Mit einem Form Field geben Nutzer einen kurzen, freien Text ein, z. B. Name, E-Mail-Adresse oder Telefonnummer. Es besteht aus einem Label über dem Feld, dem einzeiligen Eingabefeld und optional einem Hilfetext oder einer Fehlermeldung darunter.

Wann verwenden

• Nutzer geben einen freien, einzeiligen Wert ein, den das System nicht vorgeben kann, z. B. Name, E-Mail-Adresse, Kundennummer.
• Die Eingabe hat ein bekanntes Format, das sich mit einem Hilfetext erklären lässt, z. B. „name@beispiel.de“.

Wann nicht verwenden

Situation	Stattdessen
Nutzer wählen aus einer vorgegebenen Liste mit bis zu ca. 15 Optionen	Select
Nutzer wählen aus mehr als ca. 15 Optionen	Combobox
Eine einzelne Ja/Nein- bzw. An/Aus-Entscheidung	Checkbox oder Switch
Längere, mehrzeilige Texte, z. B. eine Nachricht	Textarea (eigene Komponente)
Der Wert soll nur angezeigt, nicht bearbeitet werden	Display Field

Anatomie

1. Label (Pflicht): beschreibt, was eingegeben wird. Steht über dem Feld und gehört nicht zur Feldhöhe.
2. Eingabefeld (Pflicht): nimmt den Text auf, zeigt bei Bedarf einen Platzhalter
3. Hilfetext (optional): erklärt Format oder Zweck, steht unter dem Feld
4. Fehlermeldung (bei validation: invalid): steht unter dem Feld und ersetzt den Hilfetext. Der Hilfetext wird bei invalid nicht angezeigt.

Varianten

Keine. Das Feld hat immer die Höhe der Controls (size.control.m, 40 px).

Optionen

Option	Standard	Wirkung	Figma-Name
hasHelperText	false	zeigt einen Hilfetext unter dem Feld	Helper text
placeholderShown	false	true: Platzhalter sichtbar, noch nichts eingegeben. CSS :placeholder-shown.	Placeholder
required	false	Pflichtfeld	Required

Zustände

Achse	Werte	Hinweise
interaction	none · focusVisible	focusVisible: Rahmen in border.focus
availability	enabled · disabled	disabled: Feld und Label abgeblendet, nicht fokussierbar
validation	none · invalid	z. B. Pflichtfeld leer oder falsches Format. Rahmen in danger.border, Fehlermeldung in danger.text.

Kombinationen

Kombination	Gestaltet?	Hinweis
focusVisible + invalid	ja	Der Rahmen bleibt danger.border, damit der Fehler beim Korrigieren sichtbar bleibt
invalid + hasHelperText	nein	Die Fehlermeldung ersetzt den Hilfetext. Er wird ausgeblendet und nicht vorgelesen.
disabled + invalid	nein	Ein deaktiviertes Feld zeigt keine Validierung
disabled + focusVisible	nein	Deaktivierte Felder sind nicht fokussierbar

Verhalten

• Breite: Das Feld füllt seinen Container, wird aber nie breiter als size.field.max (768 px) und nie schmaler als size.field.min (200 px). Auf Desktop geht es also nicht über die volle Inhaltsbreite. Auf schmalen Bildschirmen ist es so breit wie der Container. Wie Felder in einem Formular angeordnet werden (eine oder mehrere Spalten, Gruppen), regelt später das Pattern „Forms“.
• Das ganze Feld ist interaktiv. Ein Klick oder Tipp auf das Feld oder das Label setzt den Fokus ins Feld.
• Validierung: Fehler werden frühestens gezeigt, wenn Nutzer das Feld verlassen oder das Formular absenden, nicht schon beim ersten Tastendruck. Sobald die Eingabe korrigiert ist, verschwindet die Fehlermeldung.
• Platzhalter verschwindet bei der ersten Eingabe. Er zeigt höchstens ein Beispiel, nie eine Anweisung.
• In einer Reihe mit anderen Controls (z. B. neben einem Select oder Button) werden die Unterkanten bündig ausgerichtet (align-items: end), damit unterschiedlich lange Labels die Felder nicht verschieben.

Inhalt & Microcopy

• Label: kurz und eindeutig, z. B. „E-Mail-Adresse“, „Vorname“
• Hilfetext: erklärt Format oder Zweck, z. B. „name@beispiel.de“ oder „Nur für Rückfragen zu deiner Buchung“
• Platzhalter: nur als Beispiel, nie statt Label oder Hilfetext
• Fehlermeldung: sagt, was zu tun ist, z. B. „Gib eine E-Mail-Adresse im Format name@beispiel.de ein“

Barrierefreiheit

• Semantik: natives <input> mit passendem type (email, tel, text …) und autocomplete, damit Browser und Passwortmanager ausfüllen können
• Name: Jedes Feld hat ein sichtbares <label for>. Ein Platzhalter ersetzt das Label nie.
• Beschreibung: Der Hilfetext, bei invalid stattdessen die Fehlermeldung, ist per aria-describedby mit dem Feld verknüpft und wird nach dem Label vorgelesen. Bei invalid zeigt aria-describedby nur auf die Fehlermeldung, und das Feld trägt aria-invalid="true".
• Kontrast: Der Rahmen erreicht mit border.input mindestens 3:1 gegen bg.default, bg.variant und surface.* (WCAG 1.4.11), damit das Feld als Feld erkennbar ist.
• Fehler werden nie nur über die Farbe gezeigt, sondern immer zusätzlich mit Text.
• Lesereihenfolge: 1. Label, 2. Wert oder Platzhalter, 3. Hilfetext oder (bei invalid) Fehlermeldung
• Tastatur: Tab setzt den Fokus ins Feld bzw. zum nächsten Element. Weitere Tasten verhalten sich wie in jedem Textfeld.

Grenzfälle

Edge Cases

Fall	Verhalten
Eingabe länger als das Feld	Text scrollt im Feld horizontal, das Feld wächst nicht
Browser füllt das Feld automatisch aus	Wert erscheint wie eine eigene Eingabe, Validierung läuft wie beim Verlassen des Felds
Wert soll sichtbar, aber nicht änderbar sein	Kein deaktiviertes Feld verwenden, sondern Display Field

Maximalausprägung

• Breite: höchstens size.field.max (768 px), auch in breiten Containern
• Langes Label, Hilfetext oder Fehlermeldung: wird umbrochen, nie gekürzt. Das gilt auch bei vergrößertem Text.
• Beispiel: Label „E-Mail-Adresse für Rückfragen zu deiner Buchung“ mit langer Fehlermeldung

Minimalausprägung

• Kleinste Form: Label und Eingabefeld, ohne Hilfetext
• Höhe: size.control.m (40 px), Label kommt darüber hinzu
• Breite: mindestens size.field.min (200 px), in schmaleren Containern 100 %

Do / Don't

• ✅ Do: Ein kurzes, eindeutiges Label über dem Feld verwenden.
• ✅ Do: Einen Hilfetext für Format-Hinweise nutzen, z. B. „name@beispiel.de“.
• ✅ Do: Felder in einer Reihe an der Unterkante ausrichten (align-items: end).
• ❌ Don't: Einen Platzhalter statt eines Labels verwenden. Er verschwindet bei der Eingabe. Stattdessen: Label über dem Feld.
• ❌ Don't: Einen Fehler nur rot markieren. Stattdessen: Fehlermeldung mit Text unter dem Feld.
• ❌ Don't: Felder auf Desktop über die volle Inhaltsbreite ziehen. Stattdessen: Breite durch size.field.max begrenzen.
• ❌ Don't: Felder mit z-index oder negativen Abständen ausrichten. Stattdessen: align-items: end im Container.

Verwandte Komponenten

• Select: Auswahl aus bis zu ca. 15 vorgegebenen Optionen
• Combobox: Auswahl aus vielen Optionen mit Filterfunktion
• Checkbox / Switch: für eine einzelne An/Aus-Entscheidung
• Display Field: zeigt einen Wert an, der nicht bearbeitet werden kann

Änderungsprotokoll

Version	Datum	Änderung	Autorin
0.2	2026-10-20	Erste Doku aus der CSS, Namen nach naming.md	Lisa Vandenhoeck
0.3	2026-10-20	In die Component-Vorlage überführt (Gliederung wie Select/Combobox), Mindest- und Maximalbreite	Lisa Vandenhoeck