How to Add Icon to TextBox
Environment
Product | TextBox for Blazor |
Description
I would like to add a icon in the TextBox, like a search icon, or email or phone.
Is there anyway to do an 'addon' button with the TelerikTextBox?
Solution
TextBoxes (<input>
elements) can only hold plain text. It is possible to render an icon next to the textbox and position it over the textbox. The <input>
element itself will need some left padding to free space for the icon.
Display icon over TextBox input
<p>
<label>
Fixed Label
<span class="tb-icon-container">
<TelerikFontIcon Icon="@FontIcon.Search" />
<TelerikTextBox @bind-Value="@StringValue" Width="200px" />
</span>
</label>
</p>
<p>
<span class="tb-icon-container with-label">
<TelerikFontIcon Icon="@FontIcon.Search" />
<TelerikFloatingLabel Text="Floating Label">
<TelerikTextBox @bind-Value="@StringValue" Width="200px" />
</TelerikFloatingLabel>
</span>
</p>
<style>
/* enable absolute position for the icon */
.tb-icon-container {
position: relative;
}
/* position icon over textbox */
.tb-icon-container .k-icon {
position: absolute;
z-index: 1;
top: 0;
left: 0.5em;
}
/* add space to textbox without floating label */
.tb-icon-container .k-textbox input,
/* add space to floating label over the textbox */
.k-floating-label-container.k-empty:not(.k-focus) .k-label {
padding-left: 2em;
}
/* icon with floating label */
.tb-icon-container.with-label .k-icon {
top: 0.7em;
}
</style>
@code{
string StringValue { get; set; } = "lorem ipsum";
}
Version 2.30 and Older
UI for Blazor 3.0 changed the HTML rendering of input components. For older versions use the code below.
How to add icon to the textbox
<h3>Bootstrap prepend or append approach</h3>
<div style="width: 500px;">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<label for="theTb">
<span class="input-group-text">
<TelerikFontIcon Icon="@FontIcon.Home" />
Home
</span>
</label>
</div>
<TelerikTextBox Class="form-control" @bind-Value="@TheText" Id="theTb" />
</div>
</div>
</div>
<h3>Your own element to overlap the textbox</h3>
<label>
the label text
<span class="tb-icon-container">
@* Use the desired icons and styling here,
if you use a little more complex markup you could even
add event handlers to make this into a button *@
<TelerikFontIcon Icon="@FontIcon.Search" />
<TelerikTextBox @bind-Value="@TheText" />
</span>
</label>
<br />
<br />
<span class="tb-icon-container with-label">
<TelerikFontIcon Icon="@FontIcon.Search" />
<TelerikTextBox @bind-Value="@TheText" />
</span>
<style>
.tb-icon-container {
position: relative;
}
/* these rules position the icon. Update with your own selector if you add HTML elements for click events */
.tb-icon-container .k-icon {
position: absolute;
z-index: 1;
top: 0;
left: 0.5em;
}
/* no floating label */
.tb-icon-container input.k-textbox,
/* for the floating label */
.tb-icon-container .k-textbox input,
.tb-icon-container .k-state-empty .k-label {
padding-left: 2em;
}
/* this rule also positions the icon for the floating label scenario, tweak it with your own selectors if you use other HTML */
.tb-icon-container.with-label .k-icon {
top: 0.5em;
}
</style>
@code{
string TheText { get; set; } = "lorem ipsum";
}