New to Kendo UI for Vue? Start a free 30-day trial

OTPInput

Component

Represents the KendoVue OTPInput component. Use the OTPInput to let the user type a one-time password, one character per cell.

Definition

Package:@progress/kendo-vue-inputs

Properties Interface:OTPInputProps

Syntax:

vue

<OTPInput :length="6" :type="'number'" :group-length="3" :separator="'-'" />

Properties

ariaDescribedBy?

string

Sets the aria-describedby attribute on the OTPInput wrapper element.

ariaLabel?

string

Sets the aria-label attribute on the OTPInput wrapper element.

Example:

vue

<OTPInput :aria-label="'Enter your 6-digit code'" :length="6" />

ariaLabelledBy?

string

Sets the aria-labelledby attribute on the OTPInput wrapper element.

defaultValue?

string

Sets the initial value of the OTPInput when you do not set value. The OTPInput then handles the next updates on its own.

Example:

vue

<OTPInput :default-value="'12'" :length="6" />

dir?

"ltr" | "rtl"

Sets the text direction of the OTPInput.

The available options are:

'ltr' — left-to-right (default)
'rtl' — right-to-left

When you set it to 'rtl', the Arrow Left and Arrow Right keys move the focus in the reverse direction.

Example:

vue

<OTPInput :dir="'rtl'" />

disabled?

boolean

Sets whether the OTPInput is disabled. A disabled OTPInput does not respond to the user and gets the k-disabled CSS class.

Default:

false

Example:

vue

<OTPInput :disabled="true" :length="6" />

fillMode?

"flat" | "solid" | "outline"

Sets the fill mode of the OTPInput. The fill mode controls the background and the border.

The available options are:

'solid'
'flat'
'outline'

Example:

vue

<OTPInput :fill-mode="'outline'" :length="6" />

groupLength?

number | number[]

Sets the length of each group of input cells.

Pass a number to give all groups the same length.
Pass a number[] to give each group its own length.

The sum of all group lengths must equal length.

Example:

vue

<OTPInput :length="6" :group-length="3" :separator="'-'" />
<OTPInput :length="12" :group-length="[4, 4, 4]" :separator="'-'" />

id?

string

Sets the id attribute on the OTPInput wrapper element.

Example:

vue

<OTPInput :id="'otp-code'" :length="6" />

inputAttributes?

Object

Sets additional HTML attributes on every inner <input> element. You cannot override the attributes that the OTPInput needs to work.

Example:

vue

<OTPInput :input-attributes="{ autoComplete: 'off' }" :length="6" />

length?

number

Sets the total number of input cells.

Default:

Example:

vue

<OTPInput :length="6" />

modelValue?

string

Sets the current value of the OTPInput when you use v-model. For two-way binding, v-model is simpler than value with @change.

Example:

vue

<OTPInput v-model="otpCode" :length="6" />

name?

string

Sets the name attribute that the OTPInput uses in an HTML form. The OTPInput renders a hidden <input> with this name and the current value, so the native form can submit it.

Example:

vue

<OTPInput :name="'verificationCode'" :length="6" />

onBlur?

(event: OTPInputBlurEvent) => void

Fires when the whole OTPInput loses the focus. The event name is blur. It does not fire when the focus moves between the cells.

Parameters:eventOTPInputBlurEvent

Example:

vue

<OTPInput @blur="(e) => console.log('blurred')" :length="6" />

onChange?

(event: OTPInputChangeEvent) => void

Fires when the user changes the value of any input cell. The event name is change.

Parameters:eventOTPInputChangeEvent

Example:

vue

<OTPInput @change="(e) => console.log(e.value)" :length="6" />

onFocus?

(event: OTPInputFocusEvent) => void

Fires when any input cell gets the focus. The event name is focus.

Parameters:eventOTPInputFocusEvent

Example:

vue

<OTPInput @focus="(e) => console.log('focused cell index', e.cellIndex)" :length="6" />

placeholder?

string

Sets a placeholder character that each empty input cell shows.

Example:

vue

<OTPInput :placeholder="'·'" :length="6" />

readOnly?

boolean

Sets whether the OTPInput is read-only.

Default:

false

Example:

vue

<OTPInput :read-only="true" :value="'123456'" :length="6" />

required?

boolean

Sets whether the field is required for HTML5 constraint validation.

Default:

false

Example:

vue

<OTPInput :required="true" :length="6" />

rounded?

"small" | "medium" | "large" | "none" | "full"

Sets the border radius of the OTPInput.

The available options are:

'small'
'medium'
'large'
'full'
'none'

Example:

vue

<OTPInput :rounded="'full'" :length="6" />

separator?

string | OTPSeparatorIcon

Sets the separator between the groups of input cells. It works only when you set groupLength.

Pass a string to render a text separator.
Pass an OTPSeparatorIcon to render an icon separator.

Example:

vue

<OTPInput :length="6" :group-length="3" :separator="'-'" />
<OTPInput :length="6" :group-length="3" :separator="{ type: 'svgIcon', value: minusIcon }" />

size?

"small" | "medium" | "large"

Sets the size of the OTPInput.

The available options are:

'small'
'medium'
'large'

Example:

vue

<OTPInput :size="'large'" :length="6" />

spacing?

boolean

Sets whether the input cells render as separate boxes with space between them. When you set it to false, the cells render joined together.

Default:

true

Example:

vue

<OTPInput :spacing="false" :length="6" />

type?

OTPInputType

Sets the type of the input cells.

Default:

'text'

Example:

vue

<OTPInput :type="'number'" :length="6" />

valid?

boolean

Sets the validity of the OTPInput. When you set it to false, the OTPInput shows its invalid state.

Example:

vue

<OTPInput :valid="false" :length="6" />

value?

string

Sets the current value of the OTPInput. Use it to control the value. A space (' ') marks each empty input cell.

Example:

vue

<OTPInput :value="'12 4'" :length="4" @change="handleChange" />

References

ref

OTPInputHandle

Represents the ref of the Kendo UI for Vue OTPInput component.