Version: latest

Universell einsetzbar

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

DynamicList

DynamicList rendert eine repeatable set of input rows that users can add or remove at runtime. Ideal for managing arrays of values inside forms (e.g. phone numbers, addresses, tags).

Übersicht

import { DynamicList } from "@prokodo/ui/dynamic-list"
;<DynamicList
  label="Phone numbers"
  name="phones"
  value={phones}
  onChange={setPhones}
  renderItem={(item, onChange) => (
    <Input value={item} onChange={e => onChange(e.target.value)} />
  )}
/>

Live PreviewOpen in Storybook ↗

Import

import { DynamicList } from "@prokodo/ui/dynamic-list"

CSS:

import "@prokodo/ui/dynamic-list.css"

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`fields`	`DynamicListField[]`	—	✅	Felddefinitionen für jede Zeile.
`value`	`Record<string, unknown>[]`	—	—	Gesteuerter Array von Zeilenwerten.
`name`	`string`	—	—	Name für versteckte Formulareingabe.
`label`	`string`	—	—	Beschriftungstext oberhalb der Liste.
`labelProps`	`LabelProps`	—	—	Props für das Label-Element.
`disabled`	`boolean`	`false`	—	Alle Interaktionen deaktivieren.
`required`	`boolean`	`false`	—	Feld als Pflichtfeld markieren.
`errorText`	`string`	—	—	Fehlermeldung unterhalb der Liste.
`helperText`	`string`	—	—	Hilfetext unterhalb der Liste.
`color`	`Variants`	—	—	Farbakzent-Variante.
`buttonAddProps`	`ButtonProps`	—	—	Props für den „Zeile hinzufügen“-Button.
`buttonDeleteProps`	`ButtonProps`	—	—	Props für jeden „Zeile löschen“-Button.
`classNameList`	`string`	—	—	CSS-Klasse auf dem Listen-Wrapper.
`onChange`	`(rows: Record<string, unknown>[]) => void`	—	—	Wird aufgerufen wenn Zeilen sich ändern.
`className`	`string`	—	—	CSS-Klasse am Root-Element.

Siehe src/components/dynamic-list/DynamicList.model.ts für den vollständigen DynamicListProps-Typ.

Design-Tokens

Passe DynamicList über CSS Custom Properties auf :root oder einem übergeordneten Element an.

Token	Standard	Beschreibung
`--pk-dynamic-list-label-mb`	`var(--pk-space-md)`	Label-Unterabstand
`--pk-dynamic-list-gap`	`var(--pk-space-lg)`	Abstand zwischen Einträgen
`--pk-dynamic-list-helper-fg`	`var(--pk-palette-grey-300)`	Hilfetext-Farbe
`--pk-dynamic-list-error-fg`	`var(--pk-color-error)`	Fehler-Textfarbe

AIC-Hinweis

Verwende im Anwendungscode immer den Standard-Importpfad:

import { DynamicList } from "@prokodo/ui/dynamic-list"

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.
2.1.2	Keine Tastaturfalle (A)	🔍 Manuell prüfen	Der Tastaturfokus darf niemals innerhalb einer Komponente eingeschlossen sein; Nutzer müssen immer mit Standardtasten navigieren können.
2.4.3	Fokusreihenfolge (A)	🔍 Manuell prüfen	Die Tastaturfokus-Reihenfolge muss im vollständigen seitenseitigen Integrationskontext Bedeutung und Bedienbarkeit erhalten.
2.4.7	Fokus sichtbar (AA)	🔍 Manuell prüfen	Auf jedem interaktiven Element muss ein sichtbarer Tastaturfokus-Indikator vorhanden sein. Prüfung gegen das angewendete Produkt-Theme erforderlich.
2.4.11	Fokus nicht verdeckt (Min.) (AA)	🔍 Manuell prüfen	Die fokussierte Komponente darf nicht vollständig durch Sticky-Header, Overlays oder andere positionierte Seitenelemente verdeckt sein.
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)	✅ Erfüllt	Jedes Formularfeld benötigt ein programmatisch verknüpftes Label oder eine sichtbare Anweisung.
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.
4.1.3	Statusmeldungen (AA)	✅ Erfüllt	Statusmeldungen (Laden, Erfolg, Fehler, Fortschritt) müssen assistiven Technologien ohne Fokusverschiebung mitgeteilt werden (aria-live oder role='status').

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

Storybook

👉 DynamicList in Storybook öffnen

Quellcode

src/components/dynamic-list/DynamicList.model.ts