# Adornments

You can enhance the visual and functional aspects of the ComboBox 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 ComboBox allows you to add custom items as prefix adornments by using the [`KendoPrefixTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/prefixtemplatedirective) directive.

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

## Suffix Adornments

The ComboBox allows you to add custom items as suffix adornments by using the [`KendoSuffixTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/suffixtemplatedirective) directive.

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

## Built-In Clear Button

The ComboBox 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 ComboBox, set the [`clearButton`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/comboboxcomponent#clearbutton) property to `true`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/combobox/adornments/clear-button/source.txt)

## Separator

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

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

## Disabling Adornments

You can ensure the consistent appearance of the ComboBox component by controlling 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 ComboBox.

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

## Integration with FloatingLabel

To use the [`FloatingLabel`](https://www.telerik.com/kendo-angular-ui/components/labels/api/floatinglabelcomponent) component with a `KendoPrefixTemplate`, 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/dropdowns/combobox/adornments/floating-label/source.txt)

## Suggested Links

* [API Reference of the ComboBox](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/comboboxcomponent)
* [API Reference of the Prefix Template](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/prefixtemplatedirective)
* [API Reference of the Suffix Template](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/suffixtemplatedirective)
* [API Reference of the Separator](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/separatorcomponent)