Check list in React ListView component

23 Jan 202512 minutes to read

The ListView supports checkboxes in default and group lists, which are used to select multiple items. The checkbox can be enabled by the showCheckBox property.

The checkbox is useful in scenarios where multiple options need to be selected. For example, in a shopping cart, users can select or unselect desired items before checkout. It is also useful for selecting multiple items that belong to the same category when using a group list.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
    //define the array of JSON
    let data = [
        { text: 'Do Meditation', id: '1' },
        { text: 'Go Jogging', id: '2' },
        { text: 'Buy Groceries', id: '3' },
        { text: 'Pay Phone bill', id: '4' },
        { text: 'Play Football with your friends', id: '5' },
    ];
    return (
        // specifies the tag to render the ListView component
        <ListViewComponent id='list' dataSource={data} showCheckBox={true} headerTitle='TO DO List' showHeader={true}></ListViewComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

function App() {
  //define the array of JSON
  let data: { [key: string]: Object }[] = [
    { text: 'Do Meditation', id: '1' },
    { text: 'Go Jogging', id: '2' },
    { text: 'Buy Groceries', id: '3' },
    { text: 'Pay Phone bill', id: '4' },
    { text: 'Play Football with your friends', id: '5' },
  ];

  return (
    // specifies the tag to render the ListView component
    <ListViewComponent id='list' dataSource={data} showCheckBox={true} headerTitle='TO DO List' showHeader={true}></ListViewComponent>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
#list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</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="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-lists/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>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element' style="margin:0 auto; max-width:400px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Checkbox Position

In ListView, the checkbox can be positioned on either Left or Right side of the list-item text. This can be achieved by checkBoxPosition property. By default, the checkbox will be positioned to the Left of list-item text.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
    //define the array of JSON
    let settings = [
        { text: "Hennessey Venom", id: "list-01" },
        { text: "Bugatti Chiron", id: "list-02" },
        { text: "Bugatti Veyron Super Sport", id: "list-03" },
        { text: "SSC Ultimate Aero", id: "list-04" },
        { text: "Koenigsegg CCR", id: "list-05" },
        { text: "McLaren F1", id: "list-06" },
        { text: "Aston Martin One- 77", id: "list-07" },
        { text: "Jaguar XJ220", id: "list-08" },
        { text: "McLaren P1", id: "list-09" },
        { text: "Ferrari LaFerrari", id: "list-10" }
    ];
    let fields = { text: "text", id: "id" };
    return (
        // specifies the tag to render the ListView component
        <ListViewComponent id="list" dataSource={settings} fields={fields} showCheckBox={true} checkBoxPosition="Right" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

function App() {
  //define the array of JSON
  let settings: { [key: string]: Object }[] = [
    { text: "Hennessey Venom", id: "list-01" },
    { text: "Bugatti Chiron", id: "list-02" },
    { text: "Bugatti Veyron Super Sport", id: "list-03" },
    { text: "SSC Ultimate Aero", id: "list-04" },
    { text: "Koenigsegg CCR", id: "list-05" },
    { text: "McLaren F1", id: "list-06" },
    { text: "Aston Martin One- 77", id: "list-07" },
    { text: "Jaguar XJ220", id: "list-08" },
    { text: "McLaren P1", id: "list-09" },
    { text: "Ferrari LaFerrari", id: "list-10" }
  ];
  let fields = { text: "text", id: "id" };
  return (
    // specifies the tag to render the ListView component
    <ListViewComponent
      id="list"
      dataSource={settings}
      fields={fields}
      showCheckBox={true}
      checkBoxPosition="Right"
    />
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
#list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</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="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-lists/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>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element' style="margin:0 auto; max-width:400px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>