ButtonGroup supports radio type selection in which only one button can be selected. This can be achieved by adding input element
along with id
attribute with its corresponding label along with htmlFor
attribute inside the target element. In this ButtonGroup,
the type of the input element should be radio
and e-btn
is added to the label
element.
The following example illustrates the single selection behavior in ButtonGroup.
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render radio type ButtonGroup.
class App extends React.Component {
render() {
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>);
}
}
ReactDom.render(<App />, document.getElementById('buttongroup'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='buttongroup'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render radio type ButtonGroup.
class App extends React.Component<{}, {}> {
public render() {
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>
);
}
}
ReactDom.render(<App />,document.getElementById('buttongroup'));
ButtonGroup supports checkbox type selection in which multiple button can be selected. This can be achieved by adding input element
along with id
attribute with its corresponding label along with htmlFor
attribute inside the target element. In this ButtonGroup,
the type of the input element should be checkbox
and e-btn
is added to the label
element.
The following example illustrates the multiple selection behavior in ButtonGroup.
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render checkbox type ButtonGroup.
class App extends React.Component {
render() {
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>);
}
}
ReactDom.render(<App />, document.getElementById('buttongroup'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='buttongroup'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render checkbox type ButtonGroup.
class App extends React.Component<{}, {}> {
public render() {
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>
);
}
}
ReactDom.render(<App />,document.getElementById('buttongroup'));
Nesting with other components can be possible in ButtonGroup. The following components can be nested in ButtonGroup,
For nesting support, SplitButton dependencies
should be configured and
it should be added in system.config.js
.
To initialize DropDownButton component, refer DropDownButton Getting Started documentation
.
In the following example, DropDownButton component is added in src/App.tsx
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.
class App extends React.Component {
constructor() {
super(...arguments);
this.items = [
{
text: 'Learn SQL'
},
{
text: 'Learn PHP'
},
{
text: 'Learn Bootstrap'
}
];
}
render() {
return (<div>
<div className='e-btn-group'>
<ButtonComponent>HTML</ButtonComponent>
<ButtonComponent>CSS</ButtonComponent>
<ButtonComponent>Javascript</ButtonComponent>
<DropDownButtonComponent id="dropdownelement" items={this.items}> More </DropDownButtonComponent>
</div>
</div>);
}
}
ReactDom.render(<App />, document.getElementById('buttongroup'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='buttongroup'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
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.
class App extends React.Component<{}, {}> {
public items: ItemModel[] = [
{
text: 'Learn SQL'
},
{
text: 'Learn PHP'
},
{
text: 'Learn Bootstrap'
}];
render() {
return (
<div>
<div className='e-btn-group'>
<ButtonComponent>HTML</ButtonComponent>
<ButtonComponent>CSS</ButtonComponent>
<ButtonComponent>Javascript</ButtonComponent>
<DropDownButtonComponent id="dropdownelement" items={this.items}> More </DropDownButtonComponent>
</div>
</div>
);
}
}
ReactDom.render(<App />,document.getElementById('buttongroup'));
To initialize SplitButton component, refer SplitButton Getting Started documentation
.
In the following example, SplitButton component is added in src/App.tsx
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.
class App extends React.Component {
constructor() {
super(...arguments);
this.items = [
{
text: 'Paste'
},
{
text: 'Paste Text'
},
{
text: 'Paste Special'
}
];
}
render() {
return (<div>
<div className='e-btn-group'>
<ButtonComponent>Cut</ButtonComponent>
<ButtonComponent>Copy</ButtonComponent>
<SplitButtonComponent id="splitbuttonelement" items={this.items}> Paste </SplitButtonComponent>
</div>
</div>);
}
}
ReactDom.render(<App />, document.getElementById('buttongroup'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='buttongroup'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
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.
class App extends React.Component<{}, {}> {
public items: ItemModel[] = [
{
text: 'Paste'
},
{
text: 'Paste Text'
},
{
text: 'Paste Special'
}];
render() {
return (
<div>
<div className='e-btn-group'>
<ButtonComponent>Cut</ButtonComponent>
<ButtonComponent>Copy</ButtonComponent>
<SplitButtonComponent id="splitbuttonelement" items={this.items}> Paste </SplitButtonComponent>
</div>
</div>
);
}
}
ReactDom.render(<App />,document.getElementById('buttongroup'));