React Suite CheckPicker Disabled and read only

React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React suite Checkpicker Disabled and read-only. Checkpicker is very useful for selecting multiple items or selecting a group of data items. The checkpicker itself as well as its data items can be disabled and can also be used as a read-only component.

Syntax:

import { CheckPicker } from "rsuite";

Function App() {
return (
  <CheckPicker 
       disabled
       readOnly
       value={value} 
     onChange={setValue} data={data} 
  />
);
}

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Example 1: Below example demonstrates the disabled checkpicker component along with disabled options.

App.js

import "rsuite/dist/rsuite.min.css";
import { CheckPicker } from "rsuite";

const data = [
    "Java",
    "C++",
    "DSA",
    "Web Development",
    "Android Development",
].map((item) => ({
    label: item,
    value: item,
}));

export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite CheckPicker
                    Disabled and read only
                </h4>
            </div>
            <div style={{
                padding: 20,
                textAlign: "center"
            }}>
                <label style={{ marginLeft: 10 }}>
                    Disabled CheckPicker:
                </label>
                <CheckPicker disabled data={data} />

                <label style={{ marginLeft: 10 }}>
                    Disabled option:
                </label>

                <CheckPicker
                    data={data}
                    style={{ width: 224 }}
                    disabledItemValues={["Java", "DSA"]}
                />
            </div>
        </div>
    );
}

Output:

Example 2: Below example demonstrates the read-only checkpicker component.

App.js

import "rsuite/dist/rsuite.min.css";
import { CheckPicker } from "rsuite";

const data = [
    "Java",
    "C++",
    "DSA",
    "Web Development",
    "Android Development",
].map((item) => ({
    label: item,
    value: item,
}));

export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite CheckPicker
                    Disabled and read only
                </h4>
            </div>

            <div style={{
                padding: 20,
                textAlign: "center"
            }}>
                <label style={{ marginLeft: 10 }}>
                    Read-only CheckPicker:
                </label>
                <CheckPicker
                    data={data}
                    readOnly
                    defaultValue={["Java", "C++"]}
                />
            </div>
        </div>
    );
}

Output:

Reference: https://rsuitejs.com/components/check-picker/#disabled-and-read-only