PinField Pin-Feld
Introduction
Ein interaktives segmentiertes Eingabesteuerelement, das für die Eingabe kurzer, festlängiger alphanumerischer Zeichenfolgen konzipiert ist – beispielsweise Bestätigungscodes, Einmalpasswörter (OTP), SMS-Anmeldungs-Token und PIN-Werte. Es bietet automatischen Fokus-Zyklus, Rückwärts-Löschen über die Rücktaste, Paste-Bereinigung und vollständig einheitliche Barrierefreiheits-Beschreibungen.
Die PinField-Komponente ist als pinField-Block vollständig in den Page Builder integriert, sodass Redakteure und Entwickler Code-Längen, Validierungsformate und Eingabestates direkt im CMS konfigurieren können.
Usage
Diese Beispiele zeigen, wie Redakteure benutzerdefinierte Pin-Feld-Komponenten binden und strukturieren.
1. Standard 6-stellige SMS-Verifizierungseingabe
Eine Standard-Zahleneingabe mit 6 Segmentfeldern, optimiert für E-Mail- oder SMS-Bestätigungscodes.
{
"type": "pinField",
"label": "Verification code",
"helperText": "Enter the 6-digit confirmation code we sent to your address.",
"count": 6,
"otp": true,
"blurOnComplete": true,
"interactive": true
}
2. Sichere verdeckte Passworteingabe (4-stellig)
Zeigt ein sicheres 4-stelliges PIN-Modul. Die mask-Eigenschaft schützt die Eingabe, indem Zeichen durch generische Sicherheits-Punkte ersetzt werden.
{
"type": "pinField",
"label": "Security PIN",
"placeholder": "•",
"count": 4,
"mask": true,
"interactive": true
}
3. Benutzerdefinierter alphanumerischer Promo-Code (Flushed-Variante)
Rendert einen 5-Feld-Code-Wähler mit alphanumerischem Format und der abgesetzten flushed-Randvariante.
{
"type": "pinField",
"label": "Promo Coupon Code",
"placeholder": "-",
"count": 5,
"format": "alphanumeric",
"variant": "flushed",
"interactive": true
}
Props
| Eigenschaft | CMS-Feldtyp | Standard | Beschreibung / unterstützte Optionen |
|---|---|---|---|
Beschriftungstext (label) | string | - | Visuelle Hauptüberschrift über den Eingabesegmenten. |
Hilfetext (helperText) | string | - | Beschreibende Anweisungen unterhalb der Eingabefelder. |
Fehlermeldung (errorText) | string | - | Validierungshinweis bei fehlgeschlagenen Eingaben. |
Feldanzahl (count) | number | 4 | Anzahl der zu erzeugenden Eingabesegmente. |
Zeichenklasse (format) | select | "numeric" | Beschränkt akzeptierte Zeichen. • Optionen: "numeric", "alphanumeric", "alphabetic". |
Zeichenmaske (mask) | boolean | false | Bei Aktivierung werden Werte für sichere PIN-Eingaben verdeckt. |
OTP-Autofill (otp) | boolean | false | Aktiviert die Einmalcode-Erkennung auf Mobilgeräten. |
Auto-Absenden (autoSubmit) | boolean | false | Sendet das umgebende Formular ab, sobald das letzte Segment gefüllt ist. |
Visuelle Variante (variant) | select | "outline" | Darstellungsstil jedes Feldes. • Optionen: "outline", "subtle", "surface", "flushed". |
Größenstufe (size) | select | "md" | Steuert Breite und Höhe der Eingabefelder. • Optionen: "xs", "sm", "md", "lg", "xl". |
Interaktiv erzwingen (interactive) | boolean | true | Hydriert die Code-Felder zum Binden von Triggern und Paste-Bereinigung. |
Developer Notes & Accessibility
- Hydration Island: Als Advanced-Layout, das Paste-Events abfängt, Eingaben bereinigt und Cursor-Sprünge über Fokusgrenzen auf Mobilgeräten verarbeitet, läuft PinField als Tier-2-bedingte Insel (
"interactive": true). - WAI-ARIA-Konformität: Die Komponente umschließt jedes Segment mit passenden Layout- und Label-Tags (
role="group",aria-label). Nutzer können mit den Pfeiltasten oder der Rücktaste nahtlos zwischen Segmenten wechseln. - Formular-Integration: Sie enthält ein natives, verstecktes
<input>mit dem vollständig zusammengefügten Code-String. Auto-Submit ruft bei Abschlussform.requestSubmit()auf und übermittelt an das nächste übergeordnete Formular.