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.
The TextBox allows you to add custom items as prefix adornments by using the
You can also add custom items as suffix adornments by using the
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
To visually separate the specified adornments, set the
showSeparator property of the
KendoTextBoxSuffixTemplate directives to
To separate multiple adornment items, you can add a
You can ensure the consistent appearance of the TextBox 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 TextBox.
The following example demonstrates how to offset the
FloatingLabel when using adornments.