Version: latest

Universell einsetzbar

Form funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/form) — die Library erkennt die Umgebung automatisch.

Form

Form wraps a <form> element and provides validation orchestration, a submission loading state, and an accessible error summary. Use Form as the root container for Input, Select, Checkbox, and other form fields.

Übersicht

import { Form } from "@prokodo/ui/form"
;<Form
  label="Kontaktformular"
  fields={[
    {
      id: "email",
      type: "email",
      name: "email",
      label: "E-Mail",
      required: true,
    },
    { id: "message", type: "textarea", name: "message", label: "Nachricht" },
  ]}
  button={{ title: "Absenden" }}
  onSubmit={fields => submitToApi(fields)}
/>

Live PreviewOpen in Storybook ↗

Import

import { Form } from "@prokodo/ui/form"

CSS:

import "@prokodo/ui/form.css"

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`label`	`string`	—	✅	Formular-Titel / Beschriftung (als Überschrift gerendert).
`fields`	`FormField[]`	—	—	Array von Felddefinitionen, die im Formular gerendert werden.
`defaultFields`	`FormField[]`	—	—	Standard-Feldwerte, wenn `fields` nicht angegeben ist.
`button`	`FormButton`	—	—	Konfiguration des Absende-Buttons.
`color`	`FormVariants`	—	—	Farbakzent-Variante.
`disabled`	`boolean`	`false`	—	Alle Formularfelder deaktivieren.
`hideHeadline`	`boolean`	`false`	—	Formular-Titelzeile ausblenden.
`hideResponse`	`boolean`	`false`	—	Erfolgs-/Fehlermeldung nach Übermittlung ausblenden.
`headlineProps`	`HeadlineProps`	—	—	Props für die `Headline`-Komponente.
`messages`	`FormMessages`	—	—	Übermittlungs-Meldungen (`{ message?, errors? }`).
`messagesFields`	`FormFieldMessages`	—	—	Übersetzungs-Overrides für Feldebenen-Fehler.
`onSubmit`	`(fields: FormField[]) => void`	—	—	Wird mit validierten Feldern beim Absenden aufgerufen.
`onChangeForm`	`(field: FormField) => void`	—	—	Wird bei jeder Feldwertänderung aufgerufen.
`className`	`string`	—	—	CSS-Klasse am Root-Element.

Siehe src/components/form/Form.model.ts für den vollständigen FormProps-Typ.

Design-Tokens

Form definiert keine eigenen CSS Custom Properties. Das Erscheinungsbild wird von den einzelnen Feldkomponenten gesteuert. Siehe Input, Select usw.

Design-Tokens

Form definiert keine eigenen CSS Custom Properties. Das Erscheinungsbild wird von den einzelnen Feldkomponenten gesteuert. Siehe Input, Select usw.

AIC-Hinweis

Verwende im Anwendungscode immer den Standard-Importpfad:

import { Form } from "@prokodo/ui/form"

Eine separate Auswahl von /client oder /lazy ist im Consumer-Code nicht erforderlich.

AIC-Komponenten unterstützen außerdem ein priority-Flag für kritische Above-the-fold-Elemente. Am sichtbarsten ist das bei Image (natives Preloading via <link rel="preload"> für Above-the-fold-Inhalte).

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
1.3.5	Eingabezweck identifizieren (AA)	🔍 Manuell prüfen	Formularfelder, die persönliche Daten erfassen, müssen ihren Zweck via HTML-autocomplete-Attribut kommunizieren.
2.1.1	Tastatur (A)	🔍 Manuell prüfen	Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen.
3.3.1	Fehlererkennung (A)	🔍 Manuell prüfen	Eingabefehler müssen in Textform identifiziert und dem Nutzer beschrieben werden, nicht nur durch Farbe.
3.3.2	Bezeichnungen oder Anweisungen (A)	🔍 Manuell prüfen	Jedes Formularfeld benötigt ein programmatisch verknüpftes Label oder eine sichtbare Anweisung.
3.3.7	Redundante Eingabe (A)	🔍 Manuell prüfen	Bereits in derselben Sitzung/demselben Prozess eingegebene Informationen dürfen nicht erneut abgefragt werden, sofern die Wiederholung keinen eigenständigen Zweck erfüllt.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.

Testabdeckung: 2 jest-axe-Assertion(s) in 8 Testdatei(en) · 6 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 Form in Storybook öffnen

Quellcode

src/components/form/Form.model.ts