Server-Komponente

Label wird bevorzugt auf dem Server gerendert. Nutze den Standard-Import (z. B. @prokodo/ui/label) — die Library erkennt die Umgebung automatisch.

Label

Label rendert ein semantisches Formular-Label mit optionalem Required-Indikator und konsistenter Typografie für Form Controls.

---

Übersicht

import { Label } from '@prokodo/ui/label'

<Label htmlFor="email" required>
  Email address
</Label>
<input id="email" type="email" />

Live PreviewOpen in Storybook ↗

---

Import

import { Label } from "@prokodo/ui/label"

CSS:

import "@prokodo/ui/label.css"

---

Props

Prop	Typ	Standard	Pflicht	Beschreibung
children	ReactNode	—	✅	Label text.
htmlFor	string	—	—	Verknüpft das Label mit der id eines Formularelements.
required	boolean	false	—	Append a * indicator to signal the field is required.
disabled	boolean	false	—	Apply disabled visual style.
className	string	—	—	CSS class on <label> element.

Siehe src/components/label/Label.model.ts für den vollständigen LabelProps-Typ.

---

Design-Tokens

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

Token	Standard	Beschreibung
--pk-label-gradient-from	var(--pk-color-brand)	Verlauf Start (erstes Wort)
--pk-label-gradient-to	var(--pk-color-accent)	Verlauf Ende (erstes Wort)
--pk-label-fg	var(--pk-color-muted)	Restliche-Wörter-Farbe
--pk-label-error-from	var(--pk-color-error)	Verlauf Start (Fehlerstatus)
--pk-label-error-to	#ff6b6b	Verlauf Ende (Fehlerstatus)

---

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: 3 jest-axe-Assertion(s) in 1 Testdatei(en) · 1 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 Label in Storybook öffnen

---

Quellcode

src/components/label/Label.model.ts