PinField
Introduction
An interactive segmented input control designed for entering short, fixed-length alphanumeric strings, such as verification codes, one-time passwords (OTP), SMS login tokens, and PIN values. It features automatic cursor focus cycling, backward backspace deletion, paste-sanitization, and fully unified accessibility descriptors.
Usage
These examples illustrate how content editors bind and structure custom pin-field components.
1. Standard 6-Digit SMS Verification Input
A standard numeric PIN input configured with 6 segment boxes, optimized for email or SMS code verifications.
{
"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. Secure Hidden Password Input (4-Digits)
Demonstrates a secure 4-digit PIN module. Setting the mask property secures typing by replacing characters with generic secure bullet glyphs.
{
"type": "pinField",
"label": "Security PIN",
"placeholder": "•",
"count": 4,
"mask": true,
"interactive": true
}
3. Custom Alphanumeric Promo Code (Flushed Variant)
Renders a 5-box code selector using an alphanumeric format and a distinct flushed border variant.
{
"type": "pinField",
"label": "Promo Coupon Code",
"placeholder": "-",
"count": 5,
"format": "alphanumeric",
"variant": "flushed",
"interactive": true
}
Props
| Property | CMS Field Type | Default | Description / Supported Options |
|---|---|---|---|
Label Text (label) | string | - | Primary visual heading placed above the input segments. |
Supporting Text (helperText) | string | - | Descriptive instructions displayed beneath the input boxes. |
Error Message (errorText) | string | - | Validation message displayed when code entries fail validator checks. |
Box Count (count) | number | 4 | Number of input segment boxes to generate. |
Character Class (format) | select | "numeric" | Restricts accepted characters. • Options: "numeric", "alphanumeric", "alphabetic". |
Character Mask (mask) | boolean | false | When checked, obscures typed values for secure passcode entries. |
OTP Autofill (otp) | boolean | false | Enables one-time code autofill detection across mobile devices. |
Auto Submit (autoSubmit) | boolean | false | Instantly submits the enclosing form when the final segment is filled. |
Visual Variant (variant) | select | "outline" | Visual style of each box. • Options: "outline", "subtle", "surface", "flushed". |
Size Scale (size) | select | "md" | Controls the width and height of input boxes. • Options: "xs", "sm", "md", "lg", "xl". |
Force Interactive (interactive) | boolean | true | Hydrates the code field elements to bind tab triggers and paste sanitation. |
Developer Notes & Accessibility
- Hydration Island: As an advanced layout capturing paste events, sanitizing entries, and handling multi-input cursor hopping on mobile focus boundaries, the PinField operates as a Tier-2 conditional island (
"interactive": true). - WAI-ARIA Compliance: The component wraps each segment input with appropriate layout and labeling tags (
role="group",aria-label). Users can cycle between segments seamlessly using left/right arrow keys or backspace triggers. - Form Integration: It features a native, hidden
<input>carrying the fully joined passcode string. Auto-submit rules callform.requestSubmit()upon entry completion, seamlessly submitting actions to the nearest parent form.