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

TextArea

Component

Represents the KendoVue TextArea component. Use the TextArea to let the user type multiple lines of text.

Accepts properties of type TextAreaProps.

Definition

Package:@progress/kendo-vue-inputs

Properties Interface:TextAreaProps

Syntax:

vue
<TextArea :rows="4" :placeholder="'Describe the issue'" :auto-size="true" />

Properties

Sets the id values of the elements that describe the TextArea, like the HTML aria-describedby attribute. For example, these elements can contain an error or a hint message.

Sets the id values of the elements that label the TextArea.

autoSize?

boolean

Sets whether the TextArea changes its height to fit the content (see example). Defaults to false.

Sets a list of CSS classes to the TextArea.

defaultValue?

string | number | string[]

Sets the initial value of the TextArea when you do not set value (see example).

dir?

string

Sets the dir HTML attribute of the TextArea.

disabled?

boolean

Sets whether the TextArea is disabled (see example).

fillMode?

"flat" | "solid" | "outline"

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

The available options are:

  • solid
  • outline
  • flat
Default:

undefined

flow?

string

Sets the flow direction of the TextArea sections.

Default:

'horizontal'

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 textarea element. A label can use it as its target.

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

Sets additional CSS classes to the textarea element.

inputPrefix?

string | boolean | Object | Function

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

inputSuffix?

string | boolean | Object | Function

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

Sets the native maxlength attribute of the textarea element.

  • The TextArea 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 textarea element.

  • The TextArea 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 | string[]

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

name?

string

Sets the name attribute of the textarea element.

onBlur?

(event: TextAreaBlurEvent) => void

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

Parameters:eventTextAreaBlurEvent

Fires when the value of the TextArea changes. The event name is change.

Parameters:eventTextAreaChangeEvent

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

Parameters:eventTextAreaFocusEvent

Sets the hint text that the TextArea shows when it is empty.

readOnly?

boolean

Sets whether the TextArea is read-only.

required?

boolean

Sets whether null is a valid value for the component.

Sets how the user can resize the TextArea.

Default:

'vertical'

rounded?

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

Sets the border radius of the TextArea.

The available options are:

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

undefined

rows?

number

Sets the number of visible text rows. This sets the height of the TextArea (see example).

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

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

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

size?

"small" | "medium" | "large"

Sets the size of the TextArea.

The available options are:

  • small
  • medium
  • large
Default:

undefined

tabIndex?

number

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

title?

string

Sets the title attribute of the TextArea.

valid?

boolean

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

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

Sets whether the TextArea shows its invalid state. When you set it to false, the TextArea shows no invalid styles.

Default:

true

value?

string | number | string[]

Sets the value of the TextArea (see example).

Sets additional CSS classes to the wrapper element.