New to Kendo UI for VueStart a free 30-day trial

TextAreaProps

Interface

Represents the props of the Kendo UI for Vue TextArea component.

Definition

Package:@progress/kendo-vue-inputs

Properties

Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. For example these elements could contain error or hint message.

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

autoSize?

boolean

Specifies if the textarea element will resize its height automatically (see example). Defaults to false.

Specifies a list of CSS classes that will be added to the TextArea.

defaultValue?

string | number | string[]

The default value of the TextArea (see example).

dir?

string

Represents the dir HTML attribute.

disabled?

boolean

Specifies if the TextArea is disabled (see example).

fillMode?

"flat" | "solid" | "outline"

Configures the fillMode of the NumericTextBox.

The available options are:

  • solid
  • outline
  • flat
Default:

undefined

flow?

string

Defines the flow direction of the TextArea sections.

iconName?

string

Defines a string prop that controls the input icon. This property works only with the Kendo UI for Vue FontIcons. Check the Icons article for more information about how the Font Icon can be loaded to your project.

id?

string

Sets the id of the TextArea.

Sets the built-in HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.

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.

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.

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 | string[]

name?

string

Specifies the name property of the textarea DOM element.

onBlur?

(event: TextAreaBlurEvent) => void

The event handler that will be fired when TextArea is blurred.

Parameters:eventTextAreaBlurEvent

The event handler that will be fired when the changes the selected value.

Parameters:eventTextAreaChangeEvent

The event handler that will be fired when TextArea is focused.

Parameters:eventTextAreaFocusEvent

The hint that is displayed when the TextArea is empty.

readOnly?

boolean

Sets the read-only state of the TextArea.

required?

boolean

Specifies if null is a valid value for the component.

Defines the way the TextArea will resize.

rounded?

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

Configures the roundness of the NumericTextBox.

The available options are:

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

undefined

rows?

number

Specifies an exact height size for the TextArea to take (see example).

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

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

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

size?

"small" | "medium" | "large"

Configures the size of the NumericTextBox.

The available options are:

  • small
  • medium
  • large
Default:

undefined

tabIndex?

number

Sets the tabIndex property of the TextArea. Defaults to 0.

title?

string

Identifies the title of the TextArea component.

valid?

boolean

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

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

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

Default:

true

value?

string | number | string[]

Sets the value to be submitted (see example).

Defines additional class to the wrapper element.