OTPInputProps

Updated on Jun 24, 2026

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

Name	Type	Default	Description
ariaDescribedBy?	string		Sets the aria-describedby attribute on the OTPInput wrapper element.
ariaLabel?	string		Sets the aria-label attribute on the OTPInput wrapper element. 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. vue <OTPInput defaultValue="12" :length="6" />
dir?	"rtl" | "ltr"		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. vue <OTPInput dir="rtl" />
disabled?	boolean	false	When true, disables the OTPInput so that it cannot be interacted with and receives the k-disabled CSS class. vue <OTPInput :disabled="true" :length="6" />
fillMode?	"flat" | "solid" | "outline"		Configures the fillMode of the component. The available options are: 'solid' 'flat' 'outline' 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. 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. 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. vue <OTPInput :inputAttributes="{ autoComplete: 'off' }" :length="6" />
length?	number	4	Sets the total number of individual input cells. 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. 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. vue <OTPInput name="verificationCode" :length="6" />
onBlur?	(event: OTPInputBlurEvent) => void		Fires when the entire OTPInput loses focus (not on every inter-cell navigation). vue <OTPInput @blur="(e) => console.log('blurred')" :length="6" />
onChange?	(event: OTPInputChangeEvent) => void		Fires when the user changes the value of any input cell. vue <OTPInput @change="(e) => console.log(e.value)" :length="6" />
onFocus?	(event: OTPInputFocusEvent) => void		Fires when any input cell receives focus. 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. vue <OTPInput placeholder="·" :length="6" />
readOnly?	boolean	false	When true, sets the OTPInput to read-only mode. vue <OTPInput :readOnly="true" value="123456" :length="6" />
required?	boolean	false	Marks the field as required for HTML5 constraint validation. vue <OTPInput :required="true" :length="6" />
rounded?	"small" | "medium" | "large" | "full" | "none"		Configures the rounded property of the component. The available options are: 'small' 'medium' 'large' 'full' 'none' 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. 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' vue <OTPInput size="large" :length="6" />
spacing?	boolean	true	When true, renders the input cells as separate boxes with spacing between them. When false, renders them as adjacent (joined) cells. vue <OTPInput :spacing="false" :length="6" />
type?	OTPInputType	'text'	Sets the input type. vue <OTPInput type="number" :length="6" />
valid?	boolean		When false, renders the component in an invalid visual state. 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 (' '). vue <OTPInput :value="'12 4'" :length="4" @change="handleChange" />