Input
Represents the KendoVue Input component. Use the Input to let the user type a single line of text.
Definition
Package:@progress/kendo-vue-inputs
Properties Interface:InputProps
Syntax:
<Input :label="'First name'" :default-value="'John'" />Properties
ariaDescribedBy?
string
Sets the id values of the elements that describe the Input, like the HTML aria-describedby attribute.
ariaLabel?
string
Sets the aria-label attribute of the input element.
ariaLabelledBy?
string
Sets the id values of the elements that label the Input.
defaultValue?
string | number | string[]
Sets the initial value of the Input when you do not set value.
''
dir?
string
Sets the dir HTML attribute of the Input.
disabled?
boolean
Sets whether the Input is disabled.
fillMode?
"flat" | "solid" | "outline"
Sets the fill mode of the Input. The fill mode controls the background and the border.
The available options are:
- solid
- outline
- flat
undefined
iconName?
string
Sets the name of the input icon.
id?
string
Sets the id of the input element. The floating label uses it as its target.
inputClass?
string
Sets additional CSS classes to the input element.
inputPrefix?
string | boolean | object | Function
Sets whether the Input shows a prefix. Accepts a slot name, a render function, or a Vue component.
inputSuffix?
string | boolean | object | Function
Sets whether the Input shows a suffix. Accepts a slot name, a render function, or a Vue component.
label?
string
Renders a floating label for the Input.
maxlength?
string
minlength?
string
modelValue?
string | number
Sets the value of the Input when you use v-model.
name?
string
Sets the name property of the input DOM element.
onBlur?
(event: any) => void
Fires when the Input loses the focus. The event name is blur.
onChange?
(event: any) => void
Fires when the native change event of the input element occurs. The event name is change.
onFocus?
(event: any) => void
Fires when the Input gets the focus. The event name is focus.
onInput?
(event: any) => void
Fires each time the user types in the Input. The event name is input.
onKeydown?
(event: any) => void
Fires when the user presses a key in the Input. The event name is keydown.
onKeypress?
(event: any) => void
Fires when the user presses a key that produces a character in the Input. The event name is keypress.
onKeyup?
(event: any) => void
Fires when the user releases a key in the Input. The event name is keyup.
placeholder?
string
Sets the placeholder text of the input element. The Input shows it when it is empty.
required?
boolean
Sets whether null is a valid value for the component.
rounded?
"small" | "medium" | "large" | "none" | "full"
Sets the border radius of the Input.
The available options are:
- none
- small
- medium
- large
- full
undefined
showClearButton?
boolean
Sets whether the Input shows the clear button. Defaults to false.
showLoadingIcon?
boolean
Sets whether the Input shows the loading icon. Defaults to false.
showValidationIcon?
boolean
Sets whether the Input shows the validation icon. Defaults to false.
size?
"small" | "medium" | "large"
Sets the size of the Input.
The available options are:
- small
- medium
- large
undefined
tabIndex?
number
Sets the tabIndex attribute of the input element.
valid?
boolean
Overrides the validity state of the component.
When you set valid, the component ignores the required property.
validate?
boolean
Sets whether the Input validates its value.
validationMessage?
string
Sets the form error message of the component. If you set it to an empty string, the component shows no error.
validityStyles?
boolean
Shows or hides the invalid state styles of the component. When you set it to false, the component shows no invalid state styles.
value?
string | number | string[]
Sets the value of the Input. Use it to control the value.
wrapperClass?
string
Sets additional CSS classes to the wrapper element.