Progress Telerik UI for Blazor

Overview

The Telerik UI for Blazor Switch component is an input control for switching a Boolean state on and off. This type of input originated in mobile apps but has been gradually replacing the standard checkbox control in all sorts of applications. The component’s value can be two-way data bound to a Boolean variable. It comes with the ability to configure the labels for its on and off states, events and built-in localization and keyboard navigation.

Check out the Blazor Switch demo
Labels and Features

The Switch component offers customization on its on and off labels so you can personalize each switch. Additionally, you can easily customize it via some of the standard attributes available to the rest of the Telerik UI for Blazor suite, such as its TabIndex, Width, CSS class, etc. This makes the control feel like a native input element.

See Demo
Events
The Event fires two events to help you handle your business logic:
- ValueChanged is fired every time the value of the input changes and is triggered by both directions of the two-way binding
- OnChange is fired after the value has changed but is only triggered by the changes from the UI (one-way binding)
Learn more about Telerik UI for Blazor Switch events in our documentation
Localization

Thanks to the built-in localization support, the component’s labels are automatically translated to any language your app supports.

Check out the Switch component Localization
TabIndex

The Blazor Switch component, just like all other Telerik UI for Blazor input components, supports keyboard navigation to switch between components thanks to the HTML TabIndex property. Pressing Tab will normally focus the next available input component, the same way your users are accustomed to when standard HTML inputs are used. Having the TabIndex setting lets you customize that order.
Keyboard Navigation

Thanks to the built-in keyboard navigation, end users can interact with the Switch without lifting a finger off the keyboard.

See Demo