New to Kendo UI for AngularStart a free 30-day trial

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

Change Theme
Theme
Loading ...

Suffix Adornments

The ComboBox allows you to add custom items as suffix adornments by using the KendoSuffixTemplate directive.

Change Theme
Theme
Loading ...

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 property to true.

Change Theme
Theme
Loading ...

Separator

To visually separate the specified adornments, set the showSeparator property of the KendoPrefixTemplate and KendoSuffixTemplate directives to true. To separate multiple adornment items, you can add a Separator component.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

Integration with FloatingLabel

To use the FloatingLabel component with a KendoPrefixTemplate, utilize its labelCssClass or labelCssStyle properties.

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

Change Theme
Theme
Loading ...