Verification code

Takes a six-digit code in separate boxes that behave like one field, including paste.

Refined portWildVerificationCodeInput.vueForms/Verification Code Input

Try it

Type a code, step back with Backspace, move with the arrow keys, or paste six digits.

Error

Disabled

<WildVerificationCodeInput
  v-model="code"
/>

When to use

Use it for a six-digit code sent to the user, on login and on any action that needs a second factor.

Don’t use it

For any other number. Use a numeric input.

States

Six boxes that behave as one field.

empty

filling

complete

error

<WildVerificationCodeInput v-model="code" />

A filled box looks like an empty one, so the digits show how far through the code you are. On error all six turn red, because the code is wrong as a whole.

Content

Write the error as what happened, in one short sentence: “That code has expired.”
Clear the error as soon as the code changes, because the field keeps it until you do.

Accessibility

Each box is its own input, named “Digit 1 of 6” and so on, inside one group. The error message is announced when it appears.

Key	What it does
A digit	Fills the box and moves to the next one.
Backspace	Clears the box. On an empty box, clears the one before and moves there.
← / →	Moves to the previous or next box.
Paste	Fills from the first box, then focuses the next empty one.
Tab	Moves through the boxes, then out.

Props

Prop	Type	Default	Description
v-model	string	—	The code, up to six digits.
error	string	—	Message under the boxes. Turns all six red.
disabled	boolean	false	Blocks all six boxes.

Tokens

Token	Value	Where it lands
--radius-lg	8px	Each box, the same as every field.
--global-blue-1000	#1877F2	The 2px edge of the box with the caret, and the caret itself. 4.23:1; the cyan was 2.53:1.
--global-neutral-grey-800	#ADACB0	Any box on hover.
--global-neutral-grey-600	#DCDCDE	Every box at rest, empty or filled, 1px.
--color-error	#E12121	The 2px edge of all six boxes, and the message.
--global-neutral-grey-300	#F1F1F1	The ground when disabled.
--font-size-2xl	20px	The digits.
--font-weight-medium	475	The digits.