Set disabled state in React Switch component

2 Mar 20261 minute to read

Prevent user interaction with the Switch component by setting the disabled property to true. Disabled Switches appear grayed out and cannot be toggled, used for read-only states or when the option is temporarily unavailable.

The following example demonstrates how to disable the Switch component.

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render Switch with checked state.
function App() {
    return (<SwitchComponent disabled={true}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('switch'));

app.tsx

import { enableRipple } from '@syncfusion/ej2-base';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render Switch with checked state.
function App() {
  return (
    <SwitchComponent disabled={true} />
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('switch'));