How to disable in React Button Group

4 Sep 20263 minutes to read

Disable buttons in a React Button Group to prevent user interaction. You can disable individual buttons or the entire React Button Group.

Disable a particular button

Add the disabled attribute to a specific button element to disable only that button within the React Button Group.

Disable the entire React Button Group

Add the disabled attribute to all button elements to disable the entire React Button Group.

The following example demonstrates how to disable individual buttons and the entire React Button Group:

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To disable single button/whole ButtonGroup.
function App() {
    return (<div>
      <div className='e-btn-group'>
        <ButtonComponent>HTML</ButtonComponent>
        <ButtonComponent disabled={true}>CSS</ButtonComponent>
        <ButtonComponent>Javascript</ButtonComponent>
      </div>
      <div className='e-btn-group'>
        <ButtonComponent disabled={true}>HTML</ButtonComponent>
        <ButtonComponent disabled={true}>CSS</ButtonComponent>
        <ButtonComponent disabled={true}>Javascript</ButtonComponent>
      </div>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('buttongroup'));
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To disable single button/whole ButtonGroup.
function App() {
  return (
    <div>
      <div className='e-btn-group'>
        <ButtonComponent>HTML</ButtonComponent>
        <ButtonComponent disabled = {true}>CSS</ButtonComponent>
        <ButtonComponent>Javascript</ButtonComponent>
      </div>
      <div className='e-btn-group'>
        <ButtonComponent disabled = {true}>HTML</ButtonComponent>
        <ButtonComponent disabled = {true}>CSS</ButtonComponent>
        <ButtonComponent disabled = {true}>Javascript</ButtonComponent>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

To disable radio/checkbox type React Button Group, the disabled attribute should be added to the particular input element.