New to Kendo UI for Vue? Start a free 30-day trial

TextBoxProps

Interface

Represents the props of the Kendo UI for Vue TextBox component. Extends the native input props.

Definition

Package:@progress/kendo-vue-inputs

Properties

Sets the aria-label attribute of the input element inside the TextBox.

defaultValue?

string | number | string[]

Sets the initial value of the TextBox when you do not set value.

Default:

''

dir?

string

Sets the dir HTML attribute of the TextBox.

disabled?

boolean

Sets whether the TextBox is disabled.

fillMode?

"flat" | "solid" | "outline"

Sets the fill mode of the TextBox. The fill mode controls the background and the border.

The available options are:

  • solid
  • outline
  • flat
Default:

undefined

iconName?

string

Sets the name of the input icon. This property works only with the Kendo UI for Vue FontIcons. To learn how to load the Font Icons in your project, see the Icons article.

id?

string

Sets the id of the input element. The floating label uses it as its target.

Sets the native HTML attributes of the inner focusable input element. You cannot change the attributes that the TextBox needs to work.

Sets additional CSS classes to the input element.

inputPrefix?

string | boolean | Object | Function

inputSuffix?

string | boolean | Object | Function

label?

string

Renders a floating label for the TextBox.

Sets the native maxlength attribute of the input element.

  • The TextBox passes this property directly to the internal input element. Write it as maxlength. The camelCase and kebab-case forms do not work.

Sets the native minlength attribute of the input element.

  • The TextBox passes this property directly to the internal input element. Write it as minlength. The camelCase and kebab-case forms do not work.

modelValue?

string | number

Sets the value of the TextBox when you use v-model.

name?

string

Sets the name property of the input DOM element.

onBlur?

(event: any) => void

Fires when the TextBox loses the focus. The event name is blur.

Parameters:eventany

Fires when the native change event of the input element occurs. The event name is change.

Parameters:eventTextBoxChangeEvent

onFocus?

(event: any) => void

Fires when the TextBox gets the focus. The event name is focus.

Parameters:eventany

onKeydown?

(event: any) => void

Fires when the user presses a key in the TextBox. The event name is keydown.

Parameters:eventany

onKeypress?

(event: any) => void

Fires when the user presses a key that produces a character in the TextBox. The event name is keypress.

Parameters:eventany

onKeyup?

(event: any) => void

Fires when the user releases a key in the TextBox. The event name is keyup.

Parameters:eventany

onTextBox?

(event: any) => void

Fires each time the user types in the TextBox. The event name is input.

Parameters:eventany

Sets the placeholder text of the input element. The TextBox shows it when it is empty.

prefix?

string | boolean | Object | Function

Sets the content of the TextBox prefix. Accepts a slot name, a render function, or a Vue component. The template receives the current value and the valid state of the TextBox.

required?

boolean

Sets whether null is a valid value for the component.

role?

string

Sets the role attribute of the input element inside the TextBox.

rounded?

"small" | "medium" | "large" | "none" | "full"

Sets the border radius of the TextBox.

The available options are:

  • none
  • small
  • medium
  • large
  • full
Default:

undefined

Sets whether the TextBox shows the clear button. Defaults to false.

Sets whether the TextBox shows the loading icon. Defaults to false.

Sets whether the TextBox shows the validation icon. Defaults to false.

size?

"small" | "medium" | "large"

Sets the size of the TextBox.

The available options are:

  • small
  • medium
  • large
Default:

undefined

suffix?

string | boolean | Object | Function

Sets the content of the TextBox suffix. Accepts a slot name, a render function, or a Vue component. The template receives the current value and the valid state of the TextBox.

tabIndex?

number

Sets the native tabindex attribute of the input element inside the TextBox.

title?

string

Sets the native title attribute of the input element inside the TextBox.

valid?

boolean

Overrides the validity state of the component. When you set valid, the component ignores the required property.

validate?

boolean

Sets whether the TextBox validates its value.

Sets the form error message of the component. If you set it to an empty string, the component shows no error.

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 TextBox. Use it to control the value.

Sets additional CSS classes to the wrapper element.