Styles for Form Elements
The UI for Blazor Themes provide classes that you can use to style elements on the page so they can match the used Telerik Theme.
The UI for Blazor Themes are shared with the Kendo library - you can apply any previous knowledge about Kendo UI products.
This article provides several examples of how you can use the Telerik Themes to style generic elements. These styled generic elements will:
match the colors and styling of the Telerik components
look the same across browsers
Select one of the following links to see the example:
Existing CSS rules in the project may interfere with the applied styles. A common reason is styling from libraries like Bootstrap or rules with low specificity in the site stylesheet. This blog post can help you examine the rendering and applied styles so you can troubleshoot any issues.
Checkboxes
A specific CSS class applied to a label element can give you a checkbox that looks the same in all browsers. You still need to provide the actual input element, but it will have another CSS class that will hide it visually.
You can use the TelerikCheckBox component instead. It offers a few extra features and events.
Checkboxes with Telerik Theme styling
<input type="checkbox" id="cb1" class="k-checkbox k-checkbox-md" checked="checked">
<label class="k-checkbox-label" for="cb1">Option 1</label>
<br /><br />
<input type="checkbox" id="cb2" class="k-checkbox k-checkbox-md">
<label class="k-checkbox-label" for="cb2">Option 2</label>
<br /><br />
<input type="checkbox" id="cb3" class="k-checkbox k-checkbox-md" checked="checked" disabled="disabled">
<label class="k-checkbox-label" for="cb3">Disabled checkbox</label>
Radio Buttons
A specific CSS class applied to a label element can give you a radio buttons that look the same in all browsers. You still need to provide the actual input element, but it will have another CSS class that will hide it visually.
Blazor cannot yet handle binding radio buttons. You can find more details in this issue.
Radio Buttons with Telerik Theme styling
<input type="radio" name="radioButton" id="opt1" class="k-radio" checked="checked">
<label class="k-radio-label" for="opt1">Option 1</label>
<br /><br />
<input type="radio" name="radioButton" id="opt2" class="k-radio">
<label class="k-radio-label" for="opt2">Option 2</label>
<br /><br />
<input type="radio" name="radioButton" id="opt2" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="opt1">Disabled option</label>
Inputs (Textboxes)
You can match standard input(textbox) elements with the styling of a Telerik component like a numeric textbox.
Telerik provides the majority of necessary inputs - textbox, numeric textbox, date and time pickers, password input, various dropdowns.
Textbox with Telerik Theme styling
<TelerikTextBox />
<br /><br />
<input type="password" placeholder="Password:" class="k-textbox" />
Buttons
You can match standard button and a elements with the styling of a Telerik Button. Note that other CSS rules from libraries like Bootstrap may interfere.
Button with Telerik Theme styling
<TelerikButton>Telerik Button</TelerikButton>
<br /><br />
<TelerikButton ThemeColor="primary">Primary Telerik Button</TelerikButton>
<br /><br />
<input type="button" value="click me" class="k-button" />
<br /><br />
<input type="button" value="primary button" class="k-button k-primary" />
<br /><br />
<a href="somePage" class="k-button">I am a link</a>
Cards
There is a native Telerik Blazor Card component.
The Telerik Themes carry styling for card elements. You can read more about them in the Kendo UI Cards article.