Pin Code
A segmented code entry field with automatic focus advancement. Used for OTP, verification codes, and PINs.
6-digit OTP
Live demo — type digits to see the value accumulate. The complete flag fires when all cells are filled.
Value: —
<diwa-pin-code label="Verification code" description="Enter the 6-digit code sent to your email." length="6"></diwa-pin-code>4-digit PIN (masked)
Set type="password" to mask each digit as it is entered.
<diwa-pin-code label="Enter PIN" length="4" type="password"></diwa-pin-code>Validation states
Use state="error" or state="success" with a message to give validation feedback.
<diwa-pin-code label="Invalid code" state="error" message="The code you entered is incorrect. Please try again." length="6"></diwa-pin-code><diwa-pin-code label="Verified" state="success" message="Identity verified." value="123456" length="6"></diwa-pin-code>Compact
compact enables dense mode and reduces cell size for denser layouts.
<diwa-pin-code label="PIN" compact length="4"></diwa-pin-code>