Telerik UI for Blazor supports adornments for some of the components that incorporate input element. Using adornments allows you to enhance the Telerik UI for Blazor components by adding custom prefix and suffix elements.
A prefix input adornment refers to an element placed before the user input field. You may use it to provide clarity on the expected data in the input such as currency symbols or unit indicators. Conversely, a suffix input adornment is an element positioned after the user input field. It often serves to provide direct functionality for the entered data like password visibility toggles, formatting or clearing the input.
>caption In this article:
* [Supported Components](#supported-components)
* [Adding a Prefix Adornment](#adding-a-prefix-adornment)
* [Adding a Suffix Adornment](#adding-a-suffix-adornment)
To add a prefix, declare a `<*ComponentName*PrefixTemplate>` tag as a direct child of the `<Telerik*ComponentName*>` tag. The `PrefixTemplate` is a `RenderFragment`, which allows you to declare any desired content as a prefix—simple text, HTML elements, or components.
>caption Adding a prefix adornment in UI for Blazor
To add a suffix, declare a `<*ComponentName*SuffixTemplate>` tag as a direct child of the `<Telerik*ComponentName*>` tag. The `SuffixTemplate` is a `RenderFragment`, which allows you to declare any desired content as a prefix—a simple text, HTML elements, or components.
>caption Adding a suffix adornment in UI for Blazor
By default, the prefix and suffix are visually divided from the input element of the components by a separator. You can control whether the prefix and suffix separator will be visible through the following parameters:
| Parameter | Type and Default Value | Description |
| ----------- | ----------- | -------|
| `ShowPrefixSeparator` | `bool`<br/> (`true`) | Specifies whether the prefix separator is rendered. If a prefix template is not declared, the separator will not be rendered, regardless of the parameter value. |
| `ShowSuffixSeparator` | `bool`<br/> (`true`) | Specifies whether the suffix separator is rendered. If a prefix template is not declared, the separator will not be rendered, regardless of the parameter value |
## TextArea Specifics
In addition to the common configuration settings listed in this article, the TextArea exposes a couple of additional options that allow you to control the position of the adornments.
| Parameter | Type and Default Value | Description |
| ----------- | ----------- | -------|
| `AdornmentsOrientation` | `TextAreaAdornmentsOrientation`<br/> (`TextAreaAdornmentsOrientation.Vertical`) | Configures the positioning of the TextArea prefix and suffix templates. The possible values are `Horizontal` and `Vertical`. If the value is set to `Horizontal`, the templates will appear above (prefix) and below (suffix) the TextArea. If the value is set to `Vertical`, the templates will be displayed on the left (prefix) and on the right (suffix). By default, the templates are positioned vertically. |
| `AdornmentsFlow` | `TextAreaAdornmentsFlow`<br/> (`TextAreaAdornmentsFlow.Horizontal`) | Configures the flow of the elements in the TextArea prefix and suffix templates, determining whether the elements will be ordered in a row or column. The possible values are `Horizontal` (in a row) and `Vertical` (in a column). By default, the elements (adornments) within the templates are positioned horizontally. |
By design, `Alt` + `Down` key combination opens the popup element when the component is focused. If you have added another dropdown component as a prefix or suffix adornment, focusing that component and pressing `Alt` + `Down` keys will open both popup elements - the one that belongs to the main component and the other associated with the dropdown in the prefix/suffix template.
To prevent that behavior, you may wrap the content of the prefix/suffix template and stop the `keydown` event propagation.
