Universell einsetzbar

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

Input

Input rendert ein gestyltes <input> mit zugehörigem Label, optionalem Hilfetext unter dem Feld, Fehlerfeedback und Unterstützung für führende/abschließende Adornments (Icons oder Buttons).

---

Übersicht

import { Input } from "@prokodo/ui/input"
;<Input
  name="email"
  label="Email address"
  type="email"
  placeholder="you@example.com"
  required
/>

Live PreviewOpen in Storybook ↗

---

Import

import { Input } from "@prokodo/ui/input"

CSS:

import "@prokodo/ui/input.css"

---

Props

Prop	Typ	Standard	Pflicht	Beschreibung
id	string	—	—	HTML-id für den Input.
label	string	—	—	Eingabe-Beschriftungstext.
value	string	—	—	Gesteuerter Eingabewert.
defaultValue	string	—	—	Unkontrollierter Ausgangswert.
placeholder	string	—	—	Platzhaltertext.
type	string	"text"	—	HTML Input-Typ.
disabled	boolean	false	—	Eingabe deaktivieren.
readOnly	boolean	false	—	Eingabe schreibgeschützt machen.
required	boolean	false	—	Feld als Pflichtfeld markieren.
fullWidth	boolean	false	—	An Container-Breite anpassen.
multiline	boolean	false	—	Als <textarea> rendern.
rows	number	—	—	Anzahl sichtbarer Zeilen (textarea).
minRows	number	—	—	Mindestzeilen für auto-resize textarea.
maxRows	number	—	—	Maximalzeilen für auto-resize textarea.
startNode	ReactNode	—	—	Inhalt am Anfang der Eingabe.
endNode	ReactNode	—	—	Inhalt am Ende der Eingabe.
renderNode	ReactNode	—	—	Benutzerdefinierter Render-Override.
iconName	string	—	—	Icon-Name innerhalb des Eingabefeldes.
errorText	string	—	—	Fehlermeldung (setzt Fehlerzustand).
helperText	string	—	—	Hilfetext unterhalb der Eingabe.
color	Variants	—	—	Farbakzent-Variante.
onChange	React.ChangeEventHandler<HTMLInputElement>	—	—	Änderungs-Handler.
className	string	—	—	CSS-Klasse am Root-Element.

Siehe src/components/input/Input.model.ts für den vollständigen InputProps-Typ.

---

Design-Tokens

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

Token	Standard	Beschreibung
--pk-input-bg	var(--pk-color-surface)	Hintergrundfarbe
--pk-input-fg	var(--pk-color-fg)	Textfarbe
--pk-input-fg-muted	var(--pk-color-muted)	Placeholder / Hint
--pk-input-border	var(--pk-color-border)	Rahmenfarbe (ruhend)
--pk-input-border-focus	var(--pk-color-brand)	Rahmenfarbe (fokussiert)
--pk-input-radius	var(--pk-radius-pill)	Eckenradius
--pk-input-padding-x	var(--pk-space-lg)	Horizontaler Innenabstand
--pk-input-padding-y	0.875rem	Vertikaler Innenabstand
--pk-input-label-fg	var(--pk-color-muted)	Labelfarbe (ruhend)
--pk-input-label-focused-fg	var(--pk-color-brand)	Floating-Label-Farbe
--pk-input-helper-fg	var(--pk-palette-grey-300)	Hilfetext / Fehlertextfarbe
--pk-input-shadow	var(--pk-shadow-sm)	Box-Schatten (ruhend)
--pk-input-gradient-from	var(--pk-color-brand)	Verlauf Start (Fokusrahmen)
--pk-input-gradient-to	var(--pk-color-accent)	Verlauf Ende (Fokusrahmen)

AIC-Hinweis

Verwende im Anwendungscode immer den Standard-Importpfad:

import { Input } from "@prokodo/ui/input"

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)	✅ Erfüllt	Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen.
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.

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

Storybook

👉 Input in Storybook öffnen

---

Quellcode

src/components/input/Input.model.ts