Blazor Switch - Overview

  • Notifications On
  • Send notifications Off
  • Always visible On
  • Display real name Off
  • Overview.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
blazor ui ninja image

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.

This Blazor Switch Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.