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

Adornments

The Textbox component provides the option for adding custom items as prefix and suffix adornments.

Prefix Adornments

The TextBox allows you to add custom items as prefix adornments by using the KendoTextBoxPrefixTemplate directive.

Example
View Source
Edit In Stackblitz  
Change Theme:

Suffix Adornments

You can also add custom items as suffix adornments by using the KendoTextBoxSuffixTemplate directive.

Example
View Source
Edit In Stackblitz  
Change Theme:

Built-In Adornments

The Textbox comes with built-in adornments which can be included to extend the component functionality and styling.

Clear Button

To render a Clear button inside the TextBox, set the clearButton property to true.

Example
View Source
Edit In Stackblitz  
Change Theme:

Separator

To visually separate the specified adornments, you can add a Separator component.

Example
View Source
Edit In Stackblitz  
Change Theme:

Disabling Adornments

You fully control the disabled state of the adornments inside the prefix and suffix containers.

The following example demonstrates how to set the disabled property of the adornments when you disable the TextBox.

Example
View Source
Edit In Stackblitz  
Change Theme: