TextBoxComponent

Selector

kendo-textbox

Export Name

Accessible in templates as #kendoTextBoxInstance="kendoTextBox"

Inputs

Name	Type	Default	Description
clearButton	boolean	false	Specifies whether a Clear button will be rendered.
clearButtonIcon	string		Sets a custom icon that will be rendered instead of the default one.
clearButtonSvgIcon	SVGIcon		Sets a custom SVG icon that will be rendered instead of the default one.
disabled	boolean	false	Sets the disabled state of the TextBox. To learn how to disable the component in reactive forms, refer to the article on Forms Support.
errorIcon	string		Sets a custom icon that will be rendered instead of the default one for invalid user input.
errorSvgIcon	SVGIcon		Sets a custom SVG icon that will be rendered instead of the default one for invalid user input.
fillMode	InputFillMode		The fillMode property specifies the background and border styles of the TextBox (see example). The possible values are: flat solid (default) outline none
inputAttributes	{[key: string]: string}		Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
maxlength	number		Specifies the maximum length of the TextBox value.
placeholder	string		The hint, which is displayed when the component is empty.
readonly	boolean	false	Sets the read-only state of the component.
rounded	InputRounded		The rounded property specifies the border radius of the TextBox (see example). The possible values are: small medium (default) large full none
selectOnFocus	boolean	false	Determines whether the whole value will be selected when the TextBox is clicked. Defaults to false.
showErrorIcon	IconShowOptions	false	Specifies when the Error icon will be shown (see example). The possible values are: initial—The Error icon will be displayed when the component state is invalid and touched or dirty. boolean—The Error icon is displayed, if the condition given by the developer is met.
showSuccessIcon	IconShowOptions	false	Specifies when the Success icon will be shown (see example). The possible values are: boolean—The Success icon is displayed, if the condition given by the developer is met. initial—The Success icon will be displayed when the component state is neither invalid nor touched or dirty.
size	InputSize		The size property specifies the padding of the TextBox internal input element (see example). The possible values are: small medium (default) large none
successIcon	string		Sets a custom icon that will be rendered instead of the default one for a valid user input.
successSvgIcon	SVGIcon		Sets a custom SVG icon that will be rendered instead of the default one for a valid user input.
tabindex	number	0	Specifies the tabindex of the TextBox.
title	string		Sets the title attribute of the input element of the TextBox.
type	InputType		Sets the type attribute of the input element of the TextBox.
value	string		Provides a value for the TextBox.

Fields

Name	Type	Default	Description
input	ElementRef<any>		Represents the visible input element of the TextBox.

Events

Name	Type	Description
inputBlur	EventEmitter<any>	Fires each time the input element gets blurred.
inputFocus	EventEmitter<any>	Fires each time the user focuses the input element.
blur	EventEmitter<any>	Fires each time the TextBox component gets blurred. To wire the event programmatically, use the onBlur property. ts @Component({ selector: 'my-app', template: ` <kendo-textbox (blur)="handleBlur()"></kendo-textbox> ` }) class AppComponent { public handleBlur(): void { console.log('Component is blurred'); } }
focus	EventEmitter<any>	Fires each time the user focuses the TextBox component. To wire the event programmatically, use the onFocus property. ts @Component({ selector: 'my-app', template: ` <kendo-textbox (focus)="handleFocus()"></kendo-textbox> ` }) class AppComponent { public handleFocus(): void { console.log('Component is focused.'); } }
valueChange	EventEmitter<any>	Fires each time the value is changed— when the component is blurred or the value is cleared through the Clear button (see example). When the value of the component is programmatically changed to ngModel or formControl through its API or form binding, the valueChange event is not triggered because it might cause a mix-up with the built-in valueChange mechanisms of the ngModel or formControl bindings.

Methods

blur
Blurs the TextBox.

focus
Focuses the TextBox. ts @Component({ selector: 'my-app', template: ` <button (click)="input.focus()">Focus the input</button> <kendo-textbox #input></kendo-textbox> ` }) class AppComponent { }