KendoReact Switch Overview

The KendoReact Switch lets the user toggle between checked and unchecked states.

The KendoReact Switch component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-inputs package.


The following example demonstrates the Switch in action.

Example
View Source
Change Theme:

The Switch component is part of the KendoReact Inputs component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the Switch and the rest of the components in the package, see the Getting Started with the KendoReact Inputs guide.

Key Features

  • Disabled Switch—You can render a disabled Switch and keep it disabled until certain requirements are met.
  • Controlled mode—Take advantage of the built-in options that allow you to control the value of the Switch.
  • Default state—The Switch allows you to set its default value.
  • Labels—You can set strings as labels for the Switch.
  • Globalization—The KendoReact Switch comes with globalization features that allow you to create applications that can be used all over the world.
  • Keyboard navigation—The Switch allows end-users to control the state of the component with the space and enter keys.

support numerous keyboard shortcuts that allow users to interact with the component.

  • Accessibility—The Switch component is accessible for screen readers and provides full WAI-ARIA support.

To learn more about the appearance, anatomy, and accessibility of the Switch, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

In this article

Not finding the help you need?