• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Inputs / API / TextBoxComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

TextBoxComponent

Selector

kendo-textbox

Export Name

Accessible in templates as #kendoTextBoxInstance="kendoTextBox"

Inputs

NameTypeDefaultDescription

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

NameTypeDefaultDescription

input

ElementRef<any>

Represents the visible input element of the TextBox.

Events

NameTypeDescription

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.

@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.

@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.

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

In this article

Not finding the help you need?

Contact Support