Progress Telerik UI for Blazor

Blazor Switch

  • Toggle between checked and unchecked states with the Blazor Switch component. Combine checkbox functionality and a sleek mobile app look and feel.
  • This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
  • The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
Telerik UI for Blazor Suite
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • 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

    Telerik UI for Blazor Switch Overview
  • 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.

    Telerik UI for Blazor Switch Labels
  • 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
    Telerik UI for Blazor Events
  • 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

    Telerik UI for Blazor Switch 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.

    Accessibility for Telerik UI for ASP.NET Core

Next Steps

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.