React Suite Checkbox Group (Controlled)

React suite is a library of React components that have a 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 Checkbox Group Controlled. A Checkbox Group Controlled denotes the value of the checked box which is implemented through change of states in react.

Checkbox Props:

• checked: It specifies whether the checkbox is selected or not.
• defaultChecked: It specifies the initial state of whether the checkbox is selected or not.
• disabled: It disables the checkbox when this is set to true.
• id: It denotes the general id attribute of the checkbox.
• indeterminate: It denotes the indeterminate checked state of the checkbox.
• inline: It is used for the Inline layout.
• inputRef: It is used to denote the Ref of the input element.name: It is used to denote the name attribute of the checkbox.
• name: It denotes the name of the form
• onChange: It is the callback function that is triggered when the state changes.
• title: It denotes the HTML title.
• value: It denotes the value of CheckboxGroup.

CheckboxGroup Props:

• defaultValue: It denotes the default value.
• inline: It is used for the Inline layout.
• name: It denotes the name attribute of the checkbox.
• onChange: It is the callback function that is triggered when the state changes.
• value: It denotes the value of the checked box (Controlled).

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:

Syntax:

//App.JS file

function App() {
    const [value, setValue] = useState(['A', 'B'])

    <CheckboxGroup value={value} onChange={...}>
        <Checkbox value="A">...</Checkbox>
        <Checkbox value="B">...</Checkbox>
    </CheckboxGroup>
}

Example 1: Below example demonstrates the basic checkbox group controlled.

Javascript

import { useState } from "react";
import "rsuite/dist/rsuite.min.css";
import { Checkbox, CheckboxGroup } from "rsuite";

export default function App() {
    const [chkValue, setChkValue] = useState(["j", "s"]);

    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Checkbox Group Controlled
                </h4>

                <div style={{ marginTop: 20, width: 240 }}>
                    <CheckboxGroup
                        inline
                        name="checkboxList"
                        value={chkValue}
                        onChange={(value) => {
                            setChkValue(value);
                        }}
                    >
                        <Checkbox value="j">Java Course</Checkbox>
                        <Checkbox value="c">C++ Course</Checkbox>
                        <Checkbox value="d">DSA Course</Checkbox>
                        <Checkbox value="s">
                            Self paced DSA course
                        </Checkbox>
                    </CheckboxGroup>
                </div>
            </div>
        </center>
    );
}

Output:

Example 2: Below example demonstrates the checkbox group controlled with title and disabled props.

Javascript

import { useState } from "react";
import "rsuite/dist/rsuite.min.css";
import { Checkbox, CheckboxGroup } from "rsuite";

export default function App() {
    const [chkValue, setChkValue] = useState(["a", "c"]);

    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Checkbox Group Controlled
                </h4>

                <div style={{ marginTop: 20, width: 1000 }}>
                    <CheckboxGroup
                        inline
                        name="checkboxList"
                        value={chkValue}
                        onChange={(value) => {
                            setChkValue(value);
                        }}
                    >
                        <Checkbox value="a" title="T&C">
                            I agree to terms & conditions of GFG.
                        </Checkbox>
                        <Checkbox value="b">
                            Want the premium access to
                            GeeksforGeeks Job portal!
                        </Checkbox>
                        <Checkbox value="c" disabled>
                            Sign up of GeeksforGeeks newsletter.
                        </Checkbox>
                    </CheckboxGroup>
                </div>
            </div>
        </center>
    );
}

Output:

Reference: https://rsuitejs.com/components/checkbox/#checkbox-group-controlled