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.
  • Overview

    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
  • Labels

    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

  • Accessibility

    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 Accessibility - KendoReact

All KendoReact Components

waves bg

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.