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

OTPInputProps

Interface

Represents the props for the Kendo UI for Vue OTPInput component.

Definition

Package:@progress/kendo-vue-inputs

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 ariaLabel="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 (uncontrolled mode). Once set, subsequent updates are managed internally.

Example:

vue

<OTPInput defaultValue="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 set to 'rtl', the Arrow Left/Right keyboard navigation is reversed accordingly.

Example:

vue

<OTPInput dir="rtl" />

disabled?

boolean

When true, disables the OTPInput so that it cannot be interacted with and receives the k-disabled CSS class.

Default:

false

Example:

vue

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

fillMode?

"flat" | "solid" | "outline"

Configures the fillMode of the component.

The available options are:

'solid'
'flat'
'outline'

Example:

vue

<OTPInput fillMode="outline" :length="6" />

groupLength?

number | number[]

Sets the length of each group of input cells.

Provide a number to give all groups the same length.
Provide a number[] to assign different lengths to each group.

The sum of all group lengths must equal length.

Example:

vue

<OTPInput :length="6" :groupLength="3" separator="-" />
<OTPInput :length="12" :groupLength="[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. Attributes that are required for the component to work correctly cannot be overridden.

Example:

vue

<OTPInput :inputAttributes="{ autoComplete: 'off' }" :length="6" />

length?

number

Sets the total number of individual input cells.

Default:

Example:

vue

<OTPInput :length="6" />

modelValue?

string

Sets the current value of the OTPInput via v-model (two-way binding). Prefer using v-model over value + @change for simpler two-way binding.

Example:

vue

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

name?

string

Sets the name attribute used when the component participates in an HTML form. A hidden <input> with this name and the current value is rendered for native form submission.

Example:

vue

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

onBlur?

(event: OTPInputBlurEvent) => void

Fires when the entire OTPInput loses focus (not on every inter-cell navigation).

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.

Parameters:eventOTPInputChangeEvent

Example:

vue

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

onFocus?

(event: OTPInputFocusEvent) => void

Fires when any input cell receives focus.

Parameters:eventOTPInputFocusEvent

Example:

vue

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

placeholder?

string

Sets a placeholder character shown in each empty input cell.

Example:

vue

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

readOnly?

boolean

When true, sets the OTPInput to read-only mode.

Default:

false

Example:

vue

<OTPInput :readOnly="true" value="123456" :length="6" />

required?

boolean

Marks the field as required for HTML5 constraint validation.

Default:

false

Example:

vue

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

rounded?

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

Configures the rounded property of the component.

The available options are:

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

Example:

vue

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

separator?

string | OTPSeparatorIcon

Sets the separator rendered between groups of input cells. Only effective when groupLength is set.

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

Example:

vue

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

size?

"small" | "medium" | "large"

Configures the size of the component.

The available options are:

'small'
'medium'
'large'

Example:

vue

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

spacing?

boolean

When true, renders the input cells as separate boxes with spacing between them. When false, renders them as adjacent (joined) cells.

Default:

true

Example:

vue

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

type?

OTPInputType

Sets the input type.

Default:

'text'

Example:

vue

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

valid?

boolean

When false, renders the component in an invalid visual state.

Example:

vue

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

value?

string

Sets the current value of the OTPInput (controlled mode). Unfilled input cells are represented with a space (' ').

Example:

vue

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