A modern Switch component that provides an intuitive toggle interface for instant on/off actions.
Smooth animated transitions that ensure clear visual feedback between on and off states.
Highly customizable sizes, label positions, colors, and track labels.

4.5 / 5

(700+ Reviews)

Trusted by the world’s leading companies

React switch

Buy Now

Overview

The React Switch component is an interactive toggle for managing on and off states. It supports multiple sizes, customizable label positions, colors, track labels, and handle icons.

React switch code example

Get started with the React Switch using just a few lines of TSX code, as shown below.

import { Switch } from '@syncfusion/react-buttons';

export default function App() {
    return (
    <Switch label='Switch' defaultChecked />
    );
}

React Switch states

Switch states

Display clear states for on, off, disabled, and read-only interactions. Use the disabled mode when changes are not permitted, and use read-only mode to show the current state without allowing edits.

Switch states demo

Size

The React Switch supports small, medium, and large sizes to fit various UI layouts.

Switch size demo

React Switch sizes

React Switch label

Label position

Labels can be positioned to the left, right, above, or below to add captions for switches.

Switch label demo

Controlled mode

Manage the Switch state based on the application needs. Use controlled mode when the checked state should be handled through the app logic, or use uncontrolled mode when the Switch can manage its own state internally.

Controlled mode demo

Customization

React Switch customization

Switch styles

The Switch includes predefined options for primary, success, warning, info, and error styles. It also supports customization of its user interface, including the track, handle, and overall style.

Switch customization demo

React Switch track label

Track label

Add custom text or icons to the Switch track to display additional information based on the on/off state.

Track label demo

React Switch handle icon

Handle icon

Customize the Switch handle by displaying different icons for the on and off states.

Handle icon demo

Form validation

The Switch integrates seamlessly with HTML form validation, improving overall form reliability and accessibility.

Switch form validation

Accessibility

Users can focus the Switch and press the Spacebar to toggle between the on and off states. Focus state and current toggle status are clearly indicated.

The component uses the switch role with the aria-checked attribute to announce the current state (on/off) to screen readers.

Right-to-left (RTL) display

RTL rendering mirrors the layout for languages such as Arabic and Hebrew, adapting the visual presentation for right-to-left text direction.

Other Supported Frameworks

In addition to React, built-in integration is available for these major frameworks.

Remix

Preact

Gatsby

Vite

Next.js

Not sure how to create your first React Switch? Our documentation can help.

I’d love to read it now

Developed using React’s core principles, this library employs functional components and hooks without any external dependencies.

GRIDS

Data Grid

DATA VISUALIZATION

Charts

NAVIGATION

BUTTONS

INPUTS

LAYOUT

NOTIFICATIONS

CALENDARS

DROPDOWNS

Frequently Asked Questions

✅ Why should you choose the Syncfusion React Switch?

Provides simple on/off toggle states with smooth animations.
Built-in features include validation, track labels, handler icons, and customizable sizes.
Highly customizable interface with globalization and web accessibility features.
Simple configuration and API.
Support for all modern browsers.
Touch-friendly and responsive UI.
Extensive demos help you get started quickly with the component.

✅ Where can I find the Syncfusion React Switch demo?

You can find our React Switch demo here.

✅ Can I download and utilize the Syncfusion React Switch for free?

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.

✅ How do I get started with Syncfusion React Switch?

A good place to start would be our comprehensive getting started documentation.

See Real Success Stories

Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.

Read Our Customer Stories

Industry

Software development

75% Cost reduction

50% Faster development

“If somebody is looking for a great tool to work with? Yes. I would definitely recommend Syncfusion for anyone who is trying to develop something meaningful.”

- Somnath Maji (Founder of Igniatek Consultancy)

Read Story

Industry

Utilities (oil and gas)