background

KendoReact

React Switch

  • Quickly add a familiar on/off interface for switching between two values.
  • Part of the KendoReact library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
Switch Header
  • Customizable Toggle Component

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

    See the 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 the 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 the 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 the 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 the 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 the 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 the React Switch Accessibility demo

    Accessibility

All KendoReact Components

Next Steps