Formular
Verwendung
Verwende diesen Baustein, wenn Nutzer zusammengehörige Daten eingeben, bearbeiten oder übermitteln. Im mStudio steht ein Formular meist in einem Overlay zum Anlegen & Bearbeiten.
Aufbau
- Form – Ein Form klammert die Felder und verbindet sie über Field mit React Hook Form. Es sammelt die Werte und übergibt sie beim Absenden.
- Struktur – Sections gruppieren zusammengehörige Felder, ein ColumnLayout ordnet zusammengehörige Felder in eine Zeile – etwa Straße und Hausnummer oder PLZ und Ort. Ordne die Felder nach Wichtigkeit und stelle Zusammengehöriges nah beieinander.
- Absenden – Eine ActionGroup trägt den SubmitButton. Die Validierung erfolgt standardmäßig erst beim Absenden. Quick Submit sendet das Formular zusätzlich per ⌘/Strg + Enter aus jedem Feld ab – besonders hilfreich in einer TextArea oder einem MarkdownEditor.
Field
Diese Punkte kehren über alle Form Controls hinweg wieder:
- Label – Ein gutes Label vermittelt alle
notwendigen Informationen klar und prägnant (max. 2 Wörter). Felder sind
standardmäßig Pflichtfelder; optionale Felder tragen den Zusatz „(optional)"
am Label. Lässt sich die Anforderung aus dem Kontext erschließen, kann ein
sichtbares Label entfallen – dann muss das Form Control über
aria-labelledbyverknüpft oder mitaria-labelbeschrieben sein. - Fields & Controls – Das Design System bietet viele wiederverwendbare Form Controls: Fields wie TextField, NumberField oder PasswordCreationField sowie Controls wie Checkbox, Select oder RadioGroup. Alle findest du unter Components → Form Controls.
- FieldDescription – Die
<FieldDescription />ist ein optionaler Hilfstext unterhalb des Form Controls. Verwende sie sparsam: nur, wenn das Label allein eine Frage offenlässt – etwa ein Beispiel, ein Format, eine Einheit, eine Einschränkung oder eine Konsequenz. - FieldError – Ein ungültiges Field zeigt immer eine Fehlermeldung über die
<FieldError />. Sie erklärt verständlich, warum die Eingabe ungültig ist, und hilft bei der Korrektur. Formulierungshinweise stehen in der Guideline zu Fehlermeldungen. - Placeholder – Ein Placeholder ersetzt kein Label: Er verschwindet bei der
Eingabe und wird von Assistenztechnologien oft nicht zuverlässig erkannt.
Nutze ein
Labelfür essenzielle Anforderungen und eineFieldDescriptionfür Beispiele oder Formatierungshinweise. Eine Ausnahme ist das SearchField mit seinem kennzeichnenden Leading-Icon.
Varianten und Abwandlung
Mit Validierung
Nutze für die Validierung in der Regel
React Hook Form. Alternativ stehen
isRequired (für Pflichtfelder) und validate (für eigene Validierungen) zur
Verfügung. Bei ungültiger Eingabe wird das Field invalidiert; über die
FieldError kann eine Fehlermeldung ausgegeben werden.
Progressive Disclosure
Felder erscheinen erst, wenn sie gebraucht werden. Ein übergeordnetes Control wie eine RadioGroup oder eine Checkbox blendet die abhängigen Felder ein und hält das Formular so schlank.