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.
Suffix Adornments
The ComboBox allows you to add custom items as suffix adornments by using the KendoSuffixTemplate
directive.
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
.
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.
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.
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.