# Adornments

You can enhance the visual and functional aspects of the TextBox component by using custom adornments in the form of prefixes and suffixes. Decorating the component allows you to make it more user-friendly and engaging.

## Prefix Adornments

The TextBox allows you to add custom items as prefix adornments by using the [`KendoTextBoxPrefixTemplate`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/textboxprefixtemplatedirective) directive.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/textbox/adornments/prefix/source.txt)

## Suffix Adornments

You can also add custom items as suffix adornments by using the [`KendoTextBoxSuffixTemplate`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/textboxsuffixtemplatedirective) directive.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/textbox/adornments/suffix/source.txt)

## Built-In Clear Button

The TextBox comes with built-in **Clear** button adornment that you can use to extend the component's functionality and styling.

To render a **Clear** button inside the TextBox, set the [`clearButton`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/textboxcomponent#clearbutton) property to `true`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/textbox/clear/source.txt)

### Separator

To visually separate the specified adornments, set the [`showSeparator`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/suffixtemplatedirective#showseparator) property of the `KendoTextBoxPrefixTemplate` and `KendoTextBoxSuffixTemplate` directives to `true`.
To separate multiple adornment items, you can add a [`Separator`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/separatorcomponent) component.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/textbox/adornments/separator/source.txt)

## Disabling Adornments

By default, both the prefix and suffix adornments are treated as a constituent part of the TextBox. When you set the [`disabled`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/textboxcomponent#disabled) property of the TextBox to `true`, you also automatically apply the disabled styling to the elements inside the adornments. This ensures that the adornments visually align with the disabled state of the TextBox. Specifically, the custom prefix and suffix elements will have their [`pointer-events`](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) set to `none` and their [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) adjusted to match the disabled appearance of the component.

> To override the default behavior and ensure that the adornments are interactive, please check out the [Enabling Adornments in a Disabled Inputs Component](https://www.telerik.com/kendo-angular-ui/components/knowledge-base/enabled-adornments-disabled-inputs) Knowledge Base article.

The following example demonstrates how to visually disable the TextBox adornments by setting the `disabled` property of the component.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/textbox/adornments/disabled-items/source.txt)

### Programmatically Disabling Adornments

The [`KendoTextBoxPrefixTemplate`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/textboxprefixtemplatedirective) and [`KendoTextBoxSuffixTemplate`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/textboxsuffixtemplatedirective) directives grant you full control over the elements that will be displayed as adornments for the TextBox. This means that you can programmatically control the disabled state based on the specific element that you are rendering.

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/textbox/adornments/disabled-items/programmatic-control/source.txt)

## Integration with FloatingLabel

To use the [`FloatingLabel`](https://www.telerik.com/kendo-angular-ui/components/labels/api/floatinglabelcomponent) component with a `KendoTextBoxPrefixTemplate`, utilize its [`labelCssClass`](https://www.telerik.com/kendo-angular-ui/components/labels/api/floatinglabelcomponent#labelcssclass) or [`labelCssStyle`](https://www.telerik.com/kendo-angular-ui/components/labels/api/floatinglabelcomponent#labelcssstyle) properties.

The following example demonstrates how to offset the `FloatingLabel` when using adornments.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/textbox/adornments/floating-label/source.txt)

## Suggested Links

* [API Reference of the TextBox](https://www.telerik.com/kendo-angular-ui/components/inputs/api/textboxcomponent)
* [API Reference of the TextBox Prefix Template](https://www.telerik.com/kendo-angular-ui/components/inputs/api/textboxprefixtemplatedirective)
* [API Reference of the TextBox Suffix Template](https://www.telerik.com/kendo-angular-ui/components/inputs/api/textboxsuffixtemplatedirective)
* [API Reference of the TextBox Separator](https://www.telerik.com/kendo-angular-ui/components/inputs/api/inputseparatorcomponent)