React Switch

  • Quickly add a familiar on/off interface for switching between two values.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.


Popularized by iOS, Android, and other mobile operating systems, the React Switch lets users toggle between two values: often checked and unchecked states.

See React Switch Overview demo

React Switch - Overview, KendoReact UI Library

Disabling Switch

The KendoReact Switch can be interacted with immediately when it is added to the page. However, certain scenarios may require the KendoReact Switch to be disabled until certain requirements are met. This is why the React Switch can be toggled between enabled and disabled states with a single configuration option.

See React Switch Disabling demo

React Switch - Disabling Switch, KendoReact UI Library


The KendoReact Switch has built-in configuration options to set the label to represent either the on or off states of the component.

See React Switch Labels demo

React Switch - Labels, KendoReact UI Library

Forms Support

With built-in support for validation, setting validation requirements and setting validation messages, the KendoReact Switch can easily integrate in to any HTML form, third-party form library or the KendoReact Form component.

See React Switch Forms Support demo

React Switch - Forms Support, KendoReact UI Library

Controlled and Uncontrolled Modes

The KendoReact Switch supports both controlled mode, where it is in charge of maintaining its own state, or uncontrolled mode, where the developer is in charge of setting the React Switch and its state.

See React Switch Controlled and Uncontrolled Modes demo

Keyboard Navigation

Toggling between the on and off states of the KendoReact Switch can easily be done using keyboard navigation, rather than clicking the component with a mouse pointer.

See React Switch Keyboard Navigation demo


The KendoReact Switch supports both WAI-ARIA and Section 508 accessibility standards, and follows WCAG 2.0 with a AA rating.

See React Switch Accessibility demo

React Switch - Accessibility, KendoReact UI Library

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.