OTP Input

A multi-field input for one-time passwords, verification codes, and other fixed-length values.

Install

Run the following command to install the OTP input component:

npx acc-nuxt add OtpInput

Examples

Numeric

Value:

Alphanumeric

Value:

Invalid

Props

modelValue:string— optional

default:''

The entered OTP value. Use v-model to bind it.

length:number— optional

default:6

Number of OTP fields to render.

numericOnly:boolean— optional

default:true

When true, accepts only numeric characters.

disabled:boolean— optional

default:false

Disables every OTP field.

invalid:boolean— optional

default:false

Marks the OTP group and fields as invalid for assistive technology.

CSS Variables

--lev-otp-input-gap

default:8px

Gap between fields.

--lev-otp-input-field-width

default:44px

Preferred width of each field.

--lev-otp-input-field-min-width

default:20px

Minimum responsive width of each field.

--lev-otp-input-field-height

default:44px

Height of each field.

--lev-otp-input-color

default:#141414

Text color.

--lev-otp-input-font-size

default:16px

Text size.

--lev-otp-input-font-weight

default:500

Text weight.

--lev-otp-input-line-height

default:20px

Text line height.

--lev-otp-input-bg

default:#ffffff

Field background color.

--lev-otp-input-border

default:1px solid #c3c6c7

Field border.

--lev-otp-input-border-radius

default:6px

Field border radius.

--lev-otp-input-transition

default:border-color 100ms ease-out, background-color 100ms ease-out

Field state transition.

--lev-otp-input-disabled-color

default:#919394

Disabled text color.

--lev-otp-input-disabled-bg

default:#f0f1f2

Disabled background color.

--lev-otp-input-disabled-border-color

default:#d4d7d9

Disabled border color.

--lev-otp-input-hover-bg

default:#ffffff

Hover background color.

--lev-otp-input-hover-border-color

default:#aaacad

Hover border color.

--lev-otp-input-focus-border-color

default:#1d66bf

Focused border color.

--lev-otp-input-focus-outline

default:1px solid #1d66bf

Focused outline.

--lev-otp-input-focus-outline-offset

default:1px

Focused outline offset.

--lev-otp-input-invalid-border-color

default:#ef4444

Invalid field border color.