How can I help you?
Checkbox in React Multi select component
21 Feb 202624 minutes to read
The MultiSelect includes built-in checkbox support to select multiple values. Enable this feature by setting the mode property to CheckBox.
To use checkbox, inject the CheckBoxSelection module in the MultiSelect.
[Class-component]
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// define the JSON of data
sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
fields = { text: 'Game', value: 'Id' };
render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={this.sportsData} fields={this.fields} placeholder="Select game" mode="CheckBox">
<Inject services={[CheckBoxSelection]}/>
</MultiSelectComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// define the JSON of data
private sportsData: { [key: string]: Object }[] = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
private fields: object = { text: 'Game', value: 'Id' };
public render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={this.sportsData}
fields={this.fields} placeholder="Select game" mode="CheckBox">
<Inject services={[CheckBoxSelection]} />
</MultiSelectComponent>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));[Functional-component]
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
const fields = { text: 'Game', value: 'Id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={sportsData} fields={fields} placeholder="Select game" mode="CheckBox">
<Inject services={[CheckBoxSelection]}/>
</MultiSelectComponent>);
}
ReactDOM.render(<App />, document.getElementById('sample'));import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData: { [key: string]: Object }[] = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
const fields: object = { text: 'Game', value: 'Id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={sportsData}
fields={fields} placeholder="Select game" mode="CheckBox">
<Inject services={[CheckBoxSelection]} />
</MultiSelectComponent>
);
}
ReactDOM.render(<App />, document.getElementById('sample'));Select All
The MultiSelect component includes a Select All option in the header to select all list items at once.
When the showSelectAll property is set to true, the Select All option is displayed by default. Customize the label text using the selectAllText property.
Similarly, you can customize the unselect all label using the unSelectAllText property.
[Class-component]
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// define the JSON of data
sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
fields = { text: 'Game', value: 'Id' };
render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={this.sportsData} fields={this.fields} placeholder="Select game" mode="CheckBox" selectAllText="Select All" unSelectAllText="unSelect All" showSelectAll={true}>
<Inject services={[CheckBoxSelection]}/>
</MultiSelectComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// define the JSON of data
private sportsData: { [key: string]: Object }[] = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
private fields: object = { text: 'Game', value: 'Id' };
public render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={this.sportsData}
fields={this.fields} placeholder="Select game" mode="CheckBox" selectAllText="Select All" unSelectAllText="unSelect All" showSelectAll={true}>
<Inject services={[CheckBoxSelection]} />
</MultiSelectComponent>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));[Functional-component]
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
const fields = { text: 'Game', value: 'Id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={sportsData} fields={fields} placeholder="Select game" mode="CheckBox" selectAllText="Select All" unSelectAllText="unSelect All" showSelectAll={true}>
<Inject services={[CheckBoxSelection]}/>
</MultiSelectComponent>);
}
ReactDOM.render(<App />, document.getElementById('sample'));import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData: { [key: string]: Object }[] = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
const fields: object = { text: 'Game', value: 'Id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={sportsData}
fields={fields} placeholder="Select game" mode="CheckBox" selectAllText="Select All" unSelectAllText="unSelect All" showSelectAll={true}>
<Inject services={[CheckBoxSelection]} />
</MultiSelectComponent>
);
}
ReactDOM.render(<App />, document.getElementById('sample'));Selection Limit
Restrict the number of items that can be selected by setting the maximumSelectionLength property. This prevents users from selecting more items than the specified limit.
[Class-component]
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// define the JSON of data
sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
fields = { text: 'Game', value: 'Id' };
render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={this.sportsData} fields={this.fields} placeholder="Select game" mode="CheckBox" maximumSelectionLength={3}>
<Inject services={[CheckBoxSelection]}/>
</MultiSelectComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// define the JSON of data
private sportsData: { [key: string]: Object }[] = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
private fields: object = { text: 'Game', value: 'Id' };
public render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={this.sportsData}
fields={this.fields} placeholder="Select game" mode="CheckBox" maximumSelectionLength={3}>
<Inject services={[CheckBoxSelection]} />
</MultiSelectComponent>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));[Functional-component]
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
const fields = { text: 'Game', value: 'Id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={sportsData} fields={fields} placeholder="Select game" mode="CheckBox" maximumSelectionLength={3}>
<Inject services={[CheckBoxSelection]}/>
</MultiSelectComponent>);
}
ReactDOM.render(<App />, document.getElementById('sample'));import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData: { [key: string]: Object }[] = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
const fields: object = { text: 'Game', value: 'Id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={sportsData}
fields={fields} placeholder="Select game" mode="CheckBox" maximumSelectionLength={3}>
<Inject services={[CheckBoxSelection]} />
</MultiSelectComponent>
);
}
ReactDOM.render(<App />, document.getElementById('sample'));Selection Reordering
Enable the enableSelectionOrder property to automatically reorder selected items within the popup list, displaying them in the order they were selected.
[Class-component]
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// define the JSON of data
sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
fields = { text: 'Game', value: 'Id' };
render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={this.sportsData} fields={this.fields} placeholder="Select game" mode="CheckBox" enableSelectionOrder={false}>
<Inject services={[CheckBoxSelection]}/>
</MultiSelectComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// define the JSON of data
private sportsData: { [key: string]: Object }[] = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
private fields: object = { text: 'Game', value: 'Id' };
public render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={this.sportsData}
fields={this.fields} placeholder="Select game" mode="CheckBox" enableSelectionOrder={false}>
<Inject services={[CheckBoxSelection]} />
</MultiSelectComponent>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));[Functional-component]
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
const fields = { text: 'Game', value: 'Id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={sportsData} fields={fields} placeholder="Select game" mode="CheckBox" enableSelectionOrder={false}>
<Inject services={[CheckBoxSelection]}/>
</MultiSelectComponent>);
}
ReactDOM.render(<App />, document.getElementById('sample'));import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData: { [key: string]: Object }[] = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
const fields: object = { text: 'Game', value: 'Id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={sportsData}
fields={fields} placeholder="Select game" mode="CheckBox" enableSelectionOrder={false}>
<Inject services={[CheckBoxSelection]} />
</MultiSelectComponent>
);
}
ReactDOM.render(<App />, document.getElementById('sample'));