Pin Code
A segmented code entry field with automatic focus advancement. Used for OTP, verification codes, and PINs.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
label | string | '' | Visible label text. |
description | string | '' | Supplementary description below the label. |
state | 'none' | 'error' | 'success' | 'none' | Validation state. |
message | string | '' | Feedback message for error or success state. |
length | number | 4 | Number of input boxes (1–6). |
value | string | '' | Current value string. Pre-fills the boxes. |
type | 'number' | 'password' | 'number' | "number" restricts to digits and shows numeric keyboard on mobile; "password" masks the input. |
required | boolean | false | Whether the field is required. |
disabled | boolean | false | Disables all boxes. |
compact | boolean | false | Enables dense mode with smaller boxes. |
hideLabel | boolean | false | Hides the visible label. |
theme | 'dark' | 'light' | 'dark' | Per-component theme override. |
Events
| Name | Detail type | Bubbles | Description |
|---|---|---|---|
update | { value: string; isComplete: boolean } | No | Emitted whenever any box value changes. isComplete is true when all boxes are filled. |
Slots
diwa-pin-code uses no slots.