React Suite Checkbox Disabled and read only

React Suite is a front-end library containing a set of react components that help developers create fast and responsive react interfaces. In this article, we will be seeing React Suite Checkbox Disabled and Read Only.

The Checkbox component is generally used in groups to allow users to select one or more options from given options. When the checkbox is in the read-only state the user can only see the state of the checkbox and cannot change its state, while the disabled checkbox is an unclickable and unusable checkbox which can be useful when we want to show used an option but do not want the user to select it.

React Suite Checkbox Disabled and read-only Components:

• Checkbox: This is the basic checkbox component used to show a checkbox to the user.

React Suite Checkbox Disabled and read-only Props:

• disabled: It is a boolean property used to disable the checkbox.
• defaultChecked: This is also a boolean prop used to set the initial state of the checkbox.
• readOnly: It is a boolean prop that is used to make the checkbox read-only.

Creating The React Application And Installing Module:

Step 1: Create the React application using the npx command:

npx create-react-app foldername

Step 2: After creating the project folder, move to it using the cd command:

cd foldername

Step 3: After creating the ReactJS application, Install the rsuite module so that we can use the checkbox component using the following command:

npm install rsuite

After following the above steps, the project structure will look like this:

React Project Structure

Example 1: Now replace the code in the App.js file with the code below. Here, we used the disabled prop to disable the checkbox and the defaultChecked prop to make the checkbox checked by default.

• File: App.js

Javascript

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

function App() {
    return (
        <div className="App" style={{ display: "flex",
                             justifyContent: "center" }}>
            <div>
                <header>
                    <h3 style={{ color: "green" }}>
                        GeeksforGeeks</h3>
                    <h5>React Suite Disabled Checkbox</h5>
                </header>
                {/* Checkbox Component with "disabled" attribute */}
                <Checkbox disabled style={{ display: "block" }}>
                    Default Checkbox
                </Checkbox>
                {/* Checkbox Component with "disabled" and
                    "defaultchecked" attribute */}
                <Checkbox disabled defaultChecked
                    style={{ display: "block" }}>
                    Checked Checkbox
                </Checkbox>
            </div>
        </div>
    );
}

export default App;

Run the Application: Run the app using the below command from the root directory of the project.

npm start

Output:

React Suite Disabled Checkbox

Example 2: In this example, we used the readOnly prop to make the checkbox read-only and the defaultChecked prop to make the checkbox checked by default.

• File: App.js

Javascript

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

function App() {
    return (
        <div className="App" style={{ display: "flex",
                            justifyContent: "center" }}>
            <div>
                <header>
                    <h3 style={{ color: "green" }}>
                        GeeksforGeeks</h3>
                    <h5>React Suite Read Only Checkbox</h5>
                </header>
                {/* Checkbox Component with "readOnly" prop */}
                <Checkbox readOnly style={{ display: "block" }}>
                    Default Read-Only Checkbox
                </Checkbox>
                {/* Checkbox Component with "readOnly" and
                    "defaultchecked" props */}
                <Checkbox readOnly defaultChecked
                    style={{ display: "block" }}>
                    Checked Read-Only Checkbox
                </Checkbox>
            </div>
        </div>
    );
}

export default App;

Run the Application: Run the app using the below command from the root directory of the project.

npm start

Output:

React Suite Read-Only Checkbox

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