Tel Input

<k-input v-model="tel" name="tel" type="tel" />

Props

after

String (default: null)

Text that is shown after the input (right before the icon)

autocomplete

String (default: "tel")

Sets the HTML 5 autocomplete attribute to help with pre-filling user information according to browser settings

autofocus

Boolean (default: false)

If true, the input will be instantly focused when the form is created

before

String (default: null)

Text that is shown before the input

disabled

Boolean (default: false)

If true, the input is disabled and cannot be filled in or edited

icon

String (default: null)

Sets the icon, that is shown on the right next to the input.

id

String (default: null)

The id for the input element.

maxlength

Number (default: null)

The maximum number of accepted characters

minlength

Number (default: null)

The minimum number of required characters. When the input is not required, empty values are still accepted, even if a minlength is set.

name

String (default: null)

The name of the input element.

pattern

String (default: null)

A regex pattern that will be used to validate the input content

placeholder

String (default: null)

A placeholder, that is being shown in the input, as long as no value is entered yet.

required

Boolean (default: false)

If true, the input must not be empty

theme

String (default: null)

By default, inputs are as unstyled as possible to provide a clean boilerplate. If you need the typical field input look, you can set the theme to field

value / v-model

String (default: null)

Methods

focus()

The focus event can be used to set the focus on the input.

Events

@input

The input event is triggered when the value changes.

@invalid

The invalid event is triggered when the input validation fails. This can be used to react on errors immediately.

CSS class

.k-tel-input