Blazor Switch - Overview
- EXAMPLE
- VIEW SOURCE
- EDIT IN TELERIK REPL
- Change Theme
default
- Notifications On
- Send notifications Off
- Always visible On
- Display real name Off
- Overview.razor
The Switch component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Description
The Telerik UI for Blazor Switch component is a Boolean input that allows the user to toggle between checked and unchecked states. It behaves like a checkbox but has the look and feel that mobile device users, and all modern web users, have come to prefer since it is very touch friendly.
At its heart, the Telerik UI for Blazor Switch component sets a value to true or false, but it supports configurations and customizations that make meeting the strictest of requirements easy.
- Value and bind-value: Get and set data. Use the bind property to programmatically set the initial value.
- Enabled: Choose to enable or disable input. Often used in examples where you would like to only allow users to fill a field when prerequisites have been fulfilled.
- OnLabel and OffLabel: While the defaults are “ON” and “OFF”, you can set whatever you like.
- Class: Use your own CSS class for deep appearance customization.
- Validation: Trigger validation.
- Events: ValueChanged, OnChange and OnBlur events are exposed for you to program against.
- Appearance: Set size, rounded border radius for the container and border radius for the switch itself.
The Blazor Switch example above is intended to show you how to implement the fundamental features. Open it in the Blazor REPL to tweak the code yourself. Don’t forget to try changing the themes and pallets using the Change Theme menu.