Switch Component

The Switch component is a binary toggle component for managing boolean values with support for checked states, labels, and interaction events. It is commonly used in settings, preferences, and standalone options to represent and update on/off states.

Usage

To import and use the Switch component in your application, use the following code snippet:

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

export default function App() {
    <Switch checked={true} label="Dark mode" />
}

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

export default function App() {
    <Switch checked={true} label="Dark mode" />
}

Demos

Explore the demos of the React Switch component. Refer to this page.

Props

The following table outlines the props for the Switch component:

Name	Type	Default	Description
checked	boolean	-	Specifies a value that indicates whether the Switch is `checked` or not. Activates controlled mode.
checkedIcon	node	-	Specifies a custom icon to render inside the handle when the switch is ON (checked).
color	Color	Color.Primary	Specifies the Color style applied to the ON state track and handle. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Error', and 'Info'.
defaultChecked	boolean	false	Specifies the initial checked state of the Switch. Use for uncontrolled components.
label	string	-	Specifies the text label rendered adjacent to the switch track.
labelPlacement	Position	Position.Right	Specifies the position of the label relative to the Switch track.
offTrackLabel	node	-	Specifies the React node rendered inside the track when the switch is OFF. Can be text or icon.
onTrackLabel	node	-	Specifies the React node rendered inside the track when the switch is ON. Can be text or icon.
size	Size	Size.Medium	Specifies the Size preset controlling track and handle dimensions. Options include 'Small', 'Medium' and 'Large'.
uncheckedIcon	node	-	Specifies a custom icon to render inside the handle when the switch is OFF (unchecked).
value	string	-	Specifies the HTML form value submitted when the switch is checked.

Events

The following table outlines the events for the Switch component:

Name	Type	Description
onChange	(event: SwitchChangeEvent) => void	Triggers when the user toggles the switch. `event.value` is the new boolean state.

Switch Component

Usage

Demos

Props

Events

Enhance your React apps with Syncfusion components today