BlogPlaygroundOne

VOtpInput API

ads via vuetify

Props
name
type
default
autofocus
boolean

false

Automatically focuses the first input on page load

base-color
string

undefined

Sets the color of the input when it is not focused.

bg-color
string

undefined

Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors with or without bg- prefix (for example success, purple or bg-purple) or CSS color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page.

color
string

undefined

Applies specified color to the control - supports utility colors with or without text- prefix (for example success, purple or text-purple) or CSS color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page.

density
New in v3.12.0
'default' | 'comfortable' | 'compact'

'default'

Adjusts the vertical height used by the component.

disabled
boolean

null

Removes the ability to click or target the input.

divider
string

undefined

Specifies the dividing character between items.

error
boolean

false

Puts the input in a manual error state.

focus-all
boolean

false

Puts all inputs into a focus state when any are focused

focused
boolean

false

Forces a focused state styling on the component.

height
string | number

undefined

Sets the height for the component.

label
string

'$vuetify.input.otp'

Sets the text of the v-label or v-field-label component.

length
string | number

6

The OTP field’s length.

loading
string | boolean

false

Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it’s supported by the component) or the primary color.

masked
New in v3.12.0
boolean

false

Hides the entered characters with bullets, similar to a password input, but makes it possible to also restrict characters to digits with type="number".

max-height
string | number

undefined

Sets the maximum height for the component.

max-width
string | number

undefined

Sets the maximum width for the component.

min-height
string | number

undefined

Sets the minimum height for the component.

min-width
string | number

undefined

Sets the minimum width for the component.

model-value
string | number

undefined

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

placeholder
string

undefined

Sets the input’s placeholder text.

rounded
string | number | boolean

undefined

Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.

theme
string

undefined

Specify a theme for this component and all of its children.

type
'number' | 'text' | 'password'

'number'

Supported types: text, password, number.

variant
  | 'outlined'
  | 'plain'
  | 'underlined'
  | 'filled'
  | 'solo'
  | 'solo-inverted'
  | 'solo-filled'

'outlined'

Applies a distinct style to the component.

width
string | number

undefined

Sets the width for the component.

Events
name
type
finish
[string]

Emitted when the input is filled completely and cursor is blurred.

update:focused
[boolean]

Emitted when the input is focused or blurred

update:modelValue
[string]

Event that is emitted when the component’s model changes.

Slots
never
never
default

The default Vue slot.

loader

Slot for custom loader (displayed when loading prop is equal to true).

Exposed
boolean
() => void
isFocused

Returns true if the input is focused.

reset

Reset’s the input model to an empty array

SASS Variables
name
default
$otp-input-content-gap
.5rem
$otp-input-content-height
64px
$otp-input-content-max-width
320px
$otp-input-content-padding
.5rem
$otp-input-divided-content-max-width
360px
$otp-input-divider-margin
0 8px
$otp-input-field-font-size
1.25rem
$otp-input-padding
.5rem 0