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
directive.
Suffix Adornments
You can also add custom items as suffix adornments by using the KendoTextBoxSuffixTemplate
directive.
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
property to true
.
Separator
To visually separate the specified adornments, set the showSeparator
property of the KendoTextBoxPrefixTemplate
and KendoTextBoxSuffixTemplate
directives to true
.
To separate multiple adornment items, you can add a Separator
component.
Disabling Adornments
By default, both the prefix and suffix adornments are treated as a constituent part of the TextBox. When you set the 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
set to none
and their 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 Knowledge Base article.
The following example demonstrates how to visually disable the TextBox adornments by setting the disabled
property of the component.
Programmatically Disabling Adornments
The KendoTextBoxPrefixTemplate
and KendoTextBoxSuffixTemplate
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.
Integration with FloatingLabel
To use the FloatingLabel
component with a KendoTextBoxPrefixTemplate
, utilize its labelCssClass
or labelCssStyle
properties.
The following example demonstrates how to offset the FloatingLabel
when using adornments.