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>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
