React Suite Checkbox Group (Controlled)

0 0 2 minutes read

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>zambiatek</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>zambiatek</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  
                            zambiatek Job portal! 
                        </Checkbox> 
                        <Checkbox value="c" disabled> 
                            Sign up of zambiatek newsletter. 
                        </Checkbox> 
                    </CheckboxGroup> 
                </div> 
            </div> 
        </center> 
    ); 
} 

Output:

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!