Input Adornments
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.
In this article:
- Supported Components
- Adding a Prefix Adornment
- Adding a Suffix Adornment
- Using Separators
- TextArea Specifics
- FloatingLabel Specifics
- DropDowns Specifics
Supported Components
The following input components support prefix and suffix adornments:
Adding a Prefix 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.
Adding a prefix adornment in UI for Blazor
<div class="component-container">
<h5>TextArea</h5>
<TelerikTextArea @bind-Value="@TextValue"
Placeholder="Add comment..."
Width="300px">
<TextAreaPrefixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Comment" />
</TextAreaPrefixTemplate>
</TelerikTextArea>
</div>
<div class="component-container">
<h5>TextBox</h5>
<TelerikTextBox @bind-Value="@TextValue"
Placeholder="Enter email..."
Width="300px">
<TextBoxPrefixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Envelop" />
</TextBoxPrefixTemplate>
</TelerikTextBox>
</div>
<div class="component-container">
<h5>MaskedTextBox</h5>
<TelerikMaskedTextBox @bind-Value="@TextValue"
Mask="0000-0000-0000-0000"
Width="300px">
<MaskedTextBoxPrefixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Barcode" />
</MaskedTextBoxPrefixTemplate>
</TelerikMaskedTextBox>
</div>
<div class="component-container">
<h5>NumericTextBox</h5>
<TelerikNumericTextBox @bind-Value="@Height"
Width="300px">
<NumericTextBoxPrefixTemplate>
<span style="padding:3px">m</span>
</NumericTextBoxPrefixTemplate>
</TelerikNumericTextBox>
</div>
<div class="component-container">
<h5>AutoComplete</h5>
<TelerikAutoComplete Data="@Products"
@bind-Value="@SelectedProduct"
Placeholder="Search a product..."
ShowClearButton="true"
Width="300px">
<AutoCompletePrefixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Search" />
</AutoCompletePrefixTemplate>
</TelerikAutoComplete>
</div>
<div class="component-container">
<h5>ComboBox</h5>
<TelerikComboBox Data="@Products"
@bind-Value="@SelectedProduct"
Placeholder="Search a product..."
ShowClearButton="true"
Width="300px">
<ComboBoxPrefixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Search" />
</ComboBoxPrefixTemplate>
</TelerikComboBox>
</div>
<div class="component-container">
<h5>MultiColumnComboBox</h5>
<TelerikMultiColumnComboBox Data="@ProductModels"
@bind-Value="@SelectedProductId"
ValueField="@nameof(Product.ProductId)"
TextField="@nameof(Product.ProductName)"
Placeholder="Search a product..."
Width="300px">
<MultiColumnComboBoxPrefixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Search" />
</MultiColumnComboBoxPrefixTemplate>
<MultiColumnComboBoxColumns>
<MultiColumnComboBoxColumn Field="@nameof(Product.ProductId)" Title="Product Id"></MultiColumnComboBoxColumn>
<MultiColumnComboBoxColumn Field="@nameof(Product.ProductName)" Title="Product Name"></MultiColumnComboBoxColumn>
</MultiColumnComboBoxColumns>
</TelerikMultiColumnComboBox>
</div>
<div class="component-container">
<h5>MultiSelect</h5>
<TelerikMultiSelect Data="@Products"
@bind-Value="@SelectedProducts"
Placeholder="Search products..."
ShowClearButton="true"
Width="300px">
<MultiSelectPrefixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Search" />
</MultiSelectPrefixTemplate>
</TelerikMultiSelect>
</div>
@code {
private string TextValue { get; set; }
private string SelectedProduct { get; set; }
private int SelectedProductId { get; set; }
private int Height { get; set; }
private List<string> Products = Enumerable.Range(1, 20).Select(x => $"Product {x}").ToList();
private List<Product> ProductModels = Enumerable.Range(1, 20).Select(x => new Product { ProductId = x, ProductName = "Product " + x }).ToList();
private List<string> SelectedProducts { get; set; }
public class Product
{
public int ProductId { get; set; }
public string ProductName { get; set; }
}
}
<style>
.component-container {
border-bottom: 1px dashed black;
padding-bottom: 10px;
margin-bottom: 10px;
width: 300px
}
</style>
Adding a Suffix Adornment
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.
Adding a suffix adornment in UI for Blazor
<div class="component-container">
<h5>TextArea</h5>
<TelerikTextArea @bind-Value="@TextValue"
Placeholder="Add comment..."
Width="300px">
<TextAreaSuffixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.VolumeUp" />
</TextAreaSuffixTemplate>
</TelerikTextArea>
</div>
<div class="component-container">
<h5>TextBox</h5>
<TelerikTextBox @bind-Value="@TextValue"
Placeholder="Enter email..."
Width="300px">
<TextBoxSuffixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.X" />
</TextBoxSuffixTemplate>
</TelerikTextBox>
</div>
<div class="component-container">
<h5>MaskedTextBox</h5>
<TelerikMaskedTextBox @bind-Value="@TextValue"
Mask="0000-0000-0000-0000"
Width="300px">
<MaskedTextBoxSuffixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Eye" />
</MaskedTextBoxSuffixTemplate>
</TelerikMaskedTextBox>
</div>
<div class="component-container">
<h5>NumericTextBox</h5>
<TelerikNumericTextBox @bind-Value="@Height"
Width="300px">
<NumericTextBoxSuffixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.X" />
</NumericTextBoxSuffixTemplate>
</TelerikNumericTextBox>
</div>
<div class="component-container">
<h5>AutoComplete</h5>
<TelerikAutoComplete Data="@Products"
@bind-Value="@SelectedProduct"
Placeholder="Search a product..."
ShowClearButton="true"
Width="300px">
<AutoCompleteSuffixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Copy" />
</AutoCompleteSuffixTemplate>
</TelerikAutoComplete>
</div>
<div class="component-container">
<h5>ComboBox</h5>
<TelerikComboBox Data="@Products"
@bind-Value="@SelectedProduct"
Placeholder="Search a product..."
ShowClearButton="true"
Width="300px">
<ComboBoxSuffixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Copy" />
</ComboBoxSuffixTemplate>
</TelerikComboBox>
</div>
<div class="component-container">
<h5>MultiColumnComboBox</h5>
<TelerikMultiColumnComboBox Data="@ProductModels"
@bind-Value="@SelectedProductId"
ValueField="@nameof(Product.ProductId)"
TextField="@nameof(Product.ProductName)"
Placeholder="Search a product..."
Width="300px">
<MultiColumnComboBoxSuffixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Copy" />
</MultiColumnComboBoxSuffixTemplate>
<MultiColumnComboBoxColumns>
<MultiColumnComboBoxColumn Field="@nameof(Product.ProductId)" Title="Product Id"></MultiColumnComboBoxColumn>
<MultiColumnComboBoxColumn Field="@nameof(Product.ProductName)" Title="Product Name"></MultiColumnComboBoxColumn>
</MultiColumnComboBoxColumns>
</TelerikMultiColumnComboBox>
</div>
<div class="component-container">
<h5>MultiSelect</h5>
<TelerikMultiSelect Data="@Products"
@bind-Value="@SelectedProducts"
Placeholder="Search products..."
ShowClearButton="true"
Width="300px">
<MultiSelectSuffixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Copy" />
</MultiSelectSuffixTemplate>
</TelerikMultiSelect>
</div>
@code {
private string TextValue { get; set; }
private string SelectedProduct { get; set; }
private int SelectedProductId { get; set; }
private int Height { get; set; }
private List<string> Products = Enumerable.Range(1, 20).Select(x => $"Product {x}").ToList();
private List<Product> ProductModels = Enumerable.Range(1, 20).Select(x => new Product { ProductId = x, ProductName = "Product " + x }).ToList();
private List<string> SelectedProducts { get; set; }
public class Product
{
public int ProductId { get; set; }
public string ProductName { get; set; }
}
}
<style>
.component-container {
border-bottom: 1px dashed black;
padding-bottom: 10px;
margin-bottom: 10px;
width: 300px
}
</style>
Using Separators
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 ( 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 ( 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 ( 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 ( 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. |
FloatingLabel Specifics
When using the PrefixTemplate for a component wrapped in a FloatingLabel, the label will overlap the prefix.
To ensure both the FloatingLabel and the prefix content are properly displayed, move the label with CSS:
<style>
.custom-label-class .k-floating-label {
margin-left: 30px;
}
</style>
<TelerikFloatingLabel Class="custom-label-class" Text="Enter email">
<TelerikTextBox @bind-Value="@TextValue"
Width="300px">
<TextBoxPrefixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Envelop" />
</TextBoxPrefixTemplate>
</TelerikTextBox>
</TelerikFloatingLabel>
@code{
public string TextValue { get; set; }
}
DropDowns Specifics
This section applies to the components that incorporate popup element:
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.
Stop the keydown event propagation
<TelerikAutoComplete Data="@Roles"
@bind-Value="@SelectedRole"
Placeholder="Enter your role (can be free text)"
ShowClearButton="true">
<AutoCompletePrefixTemplate>
<div class="test" onkeydown="event.stopPropagation()">
<TelerikDropDownList Data="@Teams"
@bind-Value="SelectedTeam">
</TelerikDropDownList>
</div>
</AutoCompletePrefixTemplate>
<AutoCompleteSuffixTemplate>
<div class="test" onkeydown="event.stopPropagation()">
<TelerikDropDownList Data="@Teams"
@bind-Value="SelectedTeam">
</TelerikDropDownList>
</div>
</AutoCompleteSuffixTemplate>
</TelerikAutoComplete>
@code {
private string SelectedTeam { get; set; } = "Team 1";
private string SelectedRole { get; set; }
private List<string> Roles { get; set; } = new List<string> {
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
};
private List<string> Teams { get; set; } = new List<string> {
"Team 1", "Team 2", "Team 3"
};
}