PinInput
A segmented code input supporting keyboard arrow navigation, Backspace fallback, and paste auto-distribution.
Basic Usage
Default 6 digits
Custom Length
length=4
Set the number of cells via length.
Mask
mask
mask switches the cells to password type, masking the input values.
Controlled Initial Value
value prefill
value is distributed to each cell; the portion beyond length is truncated automatically.
Input Type
type (text / number)
type is passed through to the native input type: text (default) allows any character; number restricts to numeric input (pops up the numeric keyboard on mobile); with mask set, it is forced to password masking (see above).
Invalid State
aria-invalid is in the observedAttributes: externally calling setAttribute('aria-invalid', 'true'/'false') switches immediately — all cells and the container sync this state and get danger-colored borders, with screen readers announcing "无效". Hosts typically set it after validating on oas-complete (e.g. wrong/expired code); removing the attribute restores the default state.
aria-invalid dynamic toggle
aria-invalid static example
Disabled / Readonly
disabled
readonly
Events
Input & complete events
Listen to oas-input (per-cell input), oas-change / oas-complete (filled):
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
aria-invalid | Invalid state (synced to container and cells, marked danger) | string | — |
disabled | Disabled | boolean | — |
length | Number of code digits | string | 6 |
mask | Asterisk masking | boolean | — |
readonly | Readonly | boolean | — |
type | Cell input type | string | text |
value | Current value (controlled) | string | — |
Events
| Event | Description |
|---|---|
oas-change | Dispatched when filled, detail: { value } |
oas-complete | Dispatched when filled, detail: { value } |
oas-input | Per-cell input, detail: { value, index } |
Keyboard: ←/→ to move between cells, Backspace deletes the current cell and moves back, paste auto-distribution is supported; when all cells are empty, each cell is focusable (native caret).
ARIA: the container has role="group" + aria-label, each cell has aria-label="第 n 位", and aria-invalid is synced to both the container and all cells.