• Introduction
  • Getting Started
  • Vue 2 End of Support
  • Vue Wrappers End of Life
  • Native Components
    • Animation
    • Buttons
    • Chartsupdated
    • Conversational UI
    • Data Tools
    • Date Inputs
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Scheduler
    • ScrollView
    • Tooltip
    • TreeList
    • TreeView
    • Upload
  • Wrapper Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • FAQ
  • Troubleshooting
Components / Inputs / API / InputProps / 
New to Kendo UI for Vue? Start a free 30-day trial

InputProps

Represents the props of the KendoVue Input component. Extends the native input props.

NameTypeDefaultDescription

ariaDescribedBy?

string

Identifies the element(s) which will label the component.

ariaLabel?

string

Defines a string value that labels an interactive element.

ariaLabelledBy?

string

Defines a string value that labels an interactive element.

defaultValue?

string | number | string[]

dir?

string

disabled?

boolean

fillMode?

string

solid

Configures the fillMode of the Input.

The available options are:

  • solid
  • outline
  • flat
  • null—Does not set a fillMode class.

iconName?

string

Defines a string prop that controls the input icon.

id?

string

Renders a floating label for the Input component.

inputClass?

string

Defines additional class to the input element.

inputPrefix?

string | boolean | object | Function

Defines if the inputPrefix will be shown. Accepts a slot name, a render function, or a Vue component.

inputSuffix?

string | boolean | object | Function

Defines if the inputSuffix will be shown. Accepts a slot name, a render function, or a Vue component.

label?

string

maxlength?

string

Defines the built-in maxlength property of the text inputs.

  • As the property is directly passed to the internal input element, when defining it, it should be written as it is - maxlength. Camel-case and kebap-case won't work in this scenario.

minlength?

string

Defines the built-in minlength property of the text inputs.

  • As the property is directly passed to the internal input element, when defining it, it should be written as it is - minlength. Camel-case and kebap-case won't work in this scenario.

modelValue?

string | number

name?

string

Specifies the name property of the input DOM element.

onBlur?

(event: any) => void

Fires when the input is blurred.

onChange?

(event: any) => void

Fires when the change event of the input is triggered.

onFocus?

(event: any) => void

Fires when the input is focused.

onInput?

(event: any) => void

Fires when the input event of the input is triggered.

onKeydown?

(event: any) => void

Fires when the 'keydown' input event is triggered.

onKeypress?

(event: any) => void

Fires when the 'keypress' input event is triggered.

onKeyup?

(event: any) => void

Fires when the 'keyup' input event is triggered.

placeholder?

string

Specifies the placeholder of an input element. Used to define if the input is empty.

required?

boolean

Specifies if null is a valid value for the component.

rounded?

string

medium

Configures the roundness of the Input.

The available options are:

  • small
  • medium
  • large
  • full
  • null—Does not set a rounded class.

showClearButton?

boolean

Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.

showLoadingIcon?

boolean

Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.

showValidationIcon?

boolean

Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.

size?

string

medium

Configures the size of the Input.

The available options are:

  • small
  • medium
  • large
  • null—Does not set a size class.

tabIndex?

number

Defines tabindex to the input element.

valid?

boolean

Overrides the validity state of the component. If valid is set, the required property will be ignored.

validate?

boolean

validationMessage?

string

Controls the form error message of the component. If set to an empty string, no error will be thrown.

validityStyles?

boolean

If set to false, no visual representation of the invalid state of the component will be applied.

value?

string | number | string[]

wrapperClass?

string

Defines additional class to the wrapper element.

In this article

Not finding the help you need?

Contact Support