Forms

Aufbau einer Form

Formularfelder sollten in einer vorhersehbaren und intuitiven Reihenfolge angeordnet sein. Für eine intuitive Bedienung:

• Ordne die Felder nach ihrer Wichtigkeit.
• Platziere zusammengehörige Felder nah beieinander.
• Platziere nach Möglichkeit Eingabefelder mit Tastatureingabe nah beieinander, damit Mausnutzer nicht zwischen Klicken und Tippen wechseln müssen.

Zur Strukturierung von Formularen können Form Controls mithilfe von Sections gruppiert und mit ColumnLayouts in Spalten aufgeteilt werden. Forms werden im mStudio in der Regel in einem Modal platziert. Weitere Informationen findest du im Pattern Anlegen und Bearbeiten.

Progressively disclosed Form Controls

In manchen Fällen können Form Controls schrittweise eingeblendet werden. Sie sind dabei visuell unter einem übergeordneten Control verschachtelt. Ein gängiges Muster ist die Nutzung des "aktivierten" Zustands einer Checkbox oder RadioGroup. Dieser Zustand entscheidet, ob ein zugehöriges Form Control angezeigt wird.

---

Aufbau eines Form Controls

Forms können verschiedene Elemente enthalten. Standardmäßig sind alle Angaben Pflichtfelder. Eine Ausnahme bilden Felder mit dem Zusatz „(optional)“ am Label oder der Heading.

Label

Ein gutes Label vermittelt alle notwendigen Informationen klar und prägnant (max. 2 Wörter). Ist ein Form Control optional, füge den Zusatz „(optional)“ hinzu. Können die Eingabeanforderungen aus dem Kontext erschlossen werden, kann auf ein sichtbares Label verzichtet werden. In diesem Fall muss das Form Control über aria-labelledby verknüpft oder mit aria-label beschrieben werden.

Fields / Controls

Das Design System bietet eine große Auswahl an wiederverwendbaren Form Controls. Dazu gehören verschiedene Fields wie zum Beispiel TextField, NumberField oder PasswordCreationField sowie Controls wie Checkboxen, Selects oder RadioGroups. Alle Components sind im Bereich Components unter dem Menüpunkt Form Controls zu finden.

FieldDescription

Die <FieldDescription /> ist ein optionaler Hilfstext unterhalb des Form Controls. Sie liefert zusätzliche Informationen oder Anweisungen. Verwende sie sparsam. Sie kann Beispiele oder Hinweise zur Formatierung enthalten.

FieldError

Ein ungültiges Field muss immer eine Fehlermeldung anzeigen. Diese erklärt, warum der eingegebene Wert die Validierung nicht besteht. Nutze den <FieldError /> für diese Meldung. Beschreibe klar, warum die Eingabe ungültig ist, und hilf dem User bei der Korrektur. Hinweise zur Formulierung findest du in der Guideline zu Fehlermeldungen.

Placeholder

Placeholder sind nicht barrierefrei. Sie dürfen keine Informationen enthalten, die für das korrekte Ausfüllen eines Fields notwendig sind. Zum einen verschwinden Placeholder bei der Eingabe von Text. Zum anderen werden sie von Assistenztechnologien oft nicht zuverlässig erkannt und sind schwieriger zu verarbeiten als eine FieldDescription. Statt eines Placeholders:

• Nutze ein Label für essenzielle Informationen zu den Eingabeanforderungen.
• Nutze eine FieldDescription für Beispiele oder Formatierungshinweise.

Eine Ausnahme ist das SearchField. Es besitzt ein zusätzliches visuelles Leading Icon, das die Suche kennzeichnet.

---

Validation

Standardmäßig erfolgt die Validierung erst beim Absenden des Forms, damit der User es ohne Unterbrechung ausfüllen kann. Zum Absenden wird der <SubmitButton/> verwendet. Nutze die Components Form (React Hook Form) oder Field (React Hook Form), um die Form Controls von Flow nahtlos in das Formular-Management von React Hook Form zu integrieren.

Je nach Field stehen unterschiedliche Properties zur Verfügung, zum Beispiel:

• isRequired für Pflichtfelder.
• validate für eigene Validierungen.
• HTML Input Properties wie type="email", minLength.

Quick submit

Ein Formular sollte die Funktion „Quick submit“ unterstützen. Sie ermöglicht das Absenden über ⌘ + Enter oder Strg + Enter aus jedem Form Control, insbesondere aus einem TextArea oder einem MarkdownEditor.