HelpBot Assistant

How can I help you?

Selection and nesting in React Button group component

2 Mar 202613 minutes to read

Selection

Single selection

ButtonGroup supports radio type selection, where only one button can be selected at a time. Create a radio type ButtonGroup by adding input elements with the id attribute and corresponding labels with the htmlFor attribute. Set the input element’s type to radio and add the e-btn class to the label element.

The following example demonstrates single selection behavior in a ButtonGroup:

import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render radio type ButtonGroup.
function App() {
    return (<div>
      <div className='e-btn-group'>
          <input type="radio" id="radioleft" name="align" value="left"/>
          <label className="e-btn" htmlFor="radioleft">Left</label>
          <input type="radio" id="radiomiddle" name="align" value="middle"/>
          <label className="e-btn" htmlFor="radiomiddle">Center</label>
          <input type="radio" id="radioright" name="align" value="right"/>
          <label className="e-btn" htmlFor="radioright">Right</label>
      </div>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('buttongroup'));
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render radio type ButtonGroup.
function App() {
  return (
    <div>
      <div className='e-btn-group'>
          <input type="radio" id="radioleft" name="align" value="left" />
          <label className="e-btn" htmlFor="radioleft">Left</label>
          <input type="radio" id="radiomiddle" name="align" value="middle" />
          <label className="e-btn" htmlFor="radiomiddle">Center</label>
          <input type="radio" id="radioright" name="align" value="right"/>
          <label className="e-btn" htmlFor="radioright">Right</label>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

Multiple selection

ButtonGroup supports checkbox type selection, allowing multiple buttons to be selected simultaneously. Create a checkbox type ButtonGroup by adding input elements with the id attribute and corresponding labels with the htmlFor attribute. Set the input element’s type to checkbox and add the e-btn class to the label element.

The following example demonstrates multiple selection behavior in a ButtonGroup:

import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render checkbox type ButtonGroup.
function App() {
    return (<div>
      <div className='e-btn-group'>
          <input type="checkbox" id="checkbold" name="font" value="bold"/>
          <label className="e-btn" htmlFor="checkbold">Bold</label>
          <input type="checkbox" id="checkitalic" name="font" value="italic"/>
          <label className="e-btn" htmlFor="checkitalic">Italic</label>
          <input type="checkbox" id="checkline" name="font" value="underline"/>
          <label className="e-btn" htmlFor="checkline">Underline</label>
      </div>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('buttongroup'));
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render checkbox type ButtonGroup.
function App() {
  return (
    <div>
      <div className='e-btn-group'>
          <input type="checkbox" id="checkbold" name="font" value="bold"/>
          <label className="e-btn" htmlFor="checkbold">Bold</label>
          <input type="checkbox" id="checkitalic" name="font" value="italic" />
          <label className="e-btn" htmlFor="checkitalic">Italic</label>
          <input type="checkbox" id="checkline" name="font" value="underline"/>
          <label className="e-btn" htmlFor="checkline">Underline</label>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

Nesting

ButtonGroup supports nesting with other Syncfusion components. The following components can be nested within a ButtonGroup:

  • DropDownButton
  • SplitButton

To enable nesting support, configure the SplitButton dependencies in system.config.js.

Initialize the DropDownButton component by referring to the DropDownButton Getting Started documentation.

The following example adds the DropDownButton component to the ButtonGroup by importing it from ej2-react-splitbuttons:

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
// To render ButtonGroup with DropDownButton nesting.
function App() {
    let items = [
        {
            text: 'Learn SQL'
        },
        {
            text: 'Learn PHP'
        },
        {
            text: 'Learn Bootstrap'
        }
    ];
    return (<div>
      <div className='e-btn-group'>
          <ButtonComponent>HTML</ButtonComponent>
          <ButtonComponent>CSS</ButtonComponent>
          <ButtonComponent>Javascript</ButtonComponent>
          <DropDownButtonComponent id="dropdownelement" items={items}> More </DropDownButtonComponent>
      </div>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('buttongroup'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';

// To render ButtonGroup with DropDownButton nesting.
function App() {
  let items: ItemModel[] = [
    {
        text: 'Learn SQL'
    },
    {
        text: 'Learn PHP'
    },
    {
        text: 'Learn Bootstrap'
    }];

  return (
    <div>
      <div className='e-btn-group'>
          <ButtonComponent>HTML</ButtonComponent>
          <ButtonComponent>CSS</ButtonComponent>
          <ButtonComponent>Javascript</ButtonComponent>
          <DropDownButtonComponent id="dropdownelement" items={items}> More </DropDownButtonComponent>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

SplitButton

Initialize the SplitButton component by referring to the SplitButton Getting Started documentation.

The following example adds the SplitButton component to the ButtonGroup by importing it from ej2-react-splitbuttons:

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
// To render ButtonGroup with SplitButton nesting.
function App() {
    let items = [
        {
            text: 'Paste'
        },
        {
            text: 'Paste Text'
        },
        {
            text: 'Paste Special'
        }
    ];
    return (<div>
      <div className='e-btn-group'>
          <ButtonComponent>Cut</ButtonComponent>
          <ButtonComponent>Copy</ButtonComponent>
          <SplitButtonComponent id="splitbuttonelement" items={items}> Paste </SplitButtonComponent>
      </div>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('buttongroup'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SplitButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';

// To render ButtonGroup with SplitButton nesting.
function App() {
    let items: ItemModel[] = [
    {
        text: 'Paste'
    },
    {
        text: 'Paste Text'
    },
    {
        text: 'Paste Special'
    }];

  return (
    <div>
      <div className='e-btn-group'>
          <ButtonComponent>Cut</ButtonComponent>
          <ButtonComponent>Copy</ButtonComponent>
          <SplitButtonComponent id="splitbuttonelement" items={items}> Paste </SplitButtonComponent>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

See Also