Props and Demo Examples

This page demonstrates usage of props and events provided by HOtpInput.

Props & Events

Name	Type	Default	Description
length	`Number`	`6`	Number of OTP inputs to be rendered.
defaultColor	`String`	`#eeeeee`	Default outline and border color of each OTP input
mainColor	`String`	`#00dc82`	Main color for outlined and border when input is focused.
fontColor	`String`	`black`	Color for input text.
allowPaste	`Boolean`	`true`	If true, this will allow you paste content from clipboard to OTP input.
onlyNumber	`Boolean`	`true`	If true, you can only input number to OPT input.
type	`String`	`"password", "text"`	Specific type of OTP input.
autoFocus	`Boolean`	`true`	Whether or not to auto focus on first element on mount.
disabled	`Boolean`	`false`	Whether or not to disable the input.
outlined	`Boolean`	`false`	Whether or not to switch to outlined input.
readonly	`Boolean`	`false`	Whether or not to switch to readonly input.
wrapperClassName	`String`	`null`	The class name to use for the wrapper element.
inputClassName	`String`	`null`	The class name to use for each input element.
onChange	`Function`	`null`	Callback event that return OTP code when we made a change in inputs. `(otpCode: string)`
onFinish	`Function`	`null`	Callback event that return OTP code when we fully typed all inputs. `(otpCode: string)`
separator	`String`	`null`	Separator to be rendered.
separatorType	`String`	`"middle", "all"`	Default separator position if separator is not null
genResultWithSeparator	`Function`	`null`	Using this event, exposed from otp component to get code with separator
See the Vue3 Simple OTP Input package for more information.

Here we display a list of settings that could be applied within an application.

Current OTP Length is: 6
Outlined AutoFocus
OnlyNumber Disabled
Readonly AllowPaste
OTP type: text
Allow separator: false
Separator: middle

The final OTP code is:
The OTP changed to:
The OTP with separator: (get code by calling genResultWithSeparator() exposed from otp component)