Github

Verification Code Input

Verification code inputs capture one-time codes using segmented input fields.

Component variations

6-Digit Code

Standard 6-digit code input for OTP or verification codes

4-Digit Code

Compact 4-digit code input for PINs or short codes

States

Contains: Default, Focused, Disabled, Error

1
2
3
4
1
2
3
4
Invalid code. Please try again.

Pre-filled Value

Input code with a pre-filled value

1
2
3
4
5
6

Masked Input

Mask entered digits for sensitive data like PINs

•
•
•
•

Usage Guidelines

Import

Import the verification code input component in your module or component:

import-verification-code-input.ts

Copy code

Basic Implementation

Here is a basic example of using the verification code input component:

verification-code-input-example.html

Copy code

4-Digit PIN with Masking

Use 4-digit mode with masking for PIN entry:

pin-example.html

Copy code

Error State

Display an error state with helper text for invalid codes:

error-example.html

Copy code

Listening to Events

Handle value changes and completion events:

verification-code-input-events.html

Copy code

verification-code-input-events.ts

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
length
4 | 6
6
No
Number of input cells (4 or 6 digits)
value
string
''
No
Current value of the code input
disabled
boolean
false
No
Whether the input is disabled
state
'error' | null
null
No
Visual state of the input (error or default)
label
string
-
No
Label text displayed above the input cells
helperText
string
-
No
Helper text displayed below the input cells
autoFocus
boolean
false
No
Whether to auto-focus the first cell on initialization
mask
boolean
false
No
Whether to mask the entered digits (password mode)

Outputs

Event
Type
Description
valueChange
EventEmitter<string>
Emitted on every digit change
completed
EventEmitter<string>
Emitted when all cells are filled

Best Practices

When to Use

  • Use Verification Code Input when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Verification Code Input when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use 6-digit length for OTP and verification codes
  • Use 4-digit length for PIN codes
  • Enable masking for sensitive inputs like PINs
  • Always provide a clear label to describe what code the user should enter
  • Use helper text with error state to guide the user on what went wrong
  • Listen to the completed event to auto-submit the code once all digits are entered
  • Consider enabling autoFocus when the verification code input is the primary action on the page
  • The component supports paste — users can paste a full code and it will distribute across cells
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the verification code input features in this section

example.html

Copy code