React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

CheckBox in React MultiSelect component

18 May 2022 / 4 minutes to read

The MultiSelect has built-in support to select multiple values through checkbox, when mode property set as CheckBox.

To use checkbox, inject the CheckBoxSelection module in the MultiSelect.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
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 {
    constructor() {
        super(...arguments);
        // define the JSON of data
        this.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
        this.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'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React MultiSelect</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-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
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'));

Select All

The MultiSelect component has in-built support to select the all list items using Select All options in the header.

When the showSelectAll property is set to true, by default Select All text will show. You can customize the name attribute of the Select All option by using selectAllText.

For the unSelect All option, by default unSelect All text will show. You can customize the name attribute of the unSelect All option by using unSelectAllText.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
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 {
    constructor() {
        super(...arguments);
        // define the JSON of data
        this.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
        this.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'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React MultiSelect</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-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
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'));

Selection Limit

Defines the limit of the selected items using maximumSelectionLength.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
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 {
    constructor() {
        super(...arguments);
        // define the JSON of data
        this.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
        this.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'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React MultiSelect</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-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
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'));

Selection Reordering

Using enableSelectionOrder to Reorder the selected items in popup visibility state.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
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 {
    constructor() {
        super(...arguments);
        // define the JSON of data
        this.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
        this.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'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React MultiSelect</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-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
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'));

See Also

Previous
Next