React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. A React Suite CheckboxGroup allows the users to select one or more items from a list of choices.
CheckboxGroup Props:
- defaultValue: It stores default values in an array.
- inline: A boolean value that sets an Inline layout. It is true by default.
- name: A string that defines the CheckboxGroup form.
- onChange: A void callback function that gets fired when the checkbox is triggered and the state changes.
- value: Stores values in an array.Values of the checked boxes.
Syntax:
<CheckboxGroup> </CheckboxGroup>
Prerequisite: Introduction and installation reactJS
Creating React Application and Module installation:
Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command.
cd project
Step 3: now install the dependency by using the following command:
npm install rsuite
Project Structure: It will look like this:
Example 1: We are importing CheckboxGroup and Checkbox from rsuite. Within the CheckboxGroup component, we are naming it “FruitList” using the name prop, and using the inline prop so that the layout is inline, we are also calling the onChangeHandler that gets fired whenever we check or uncheck the checkboxes within this CheckboxGroup, this function shows the value we have selected. We are adding the Checkbox component with values related to fruit names.
App.js
import { CheckboxGroup, Checkbox } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { const onChangeHandler = (e) => { alert(e); }; return ( <div className="App"> <h4>React Suite CheckboxGroup Prop </h4> <CheckboxGroup name="FruitList" inline onChange={onChangeHandler}> <Checkbox value="Apple">Apple</Checkbox> <Checkbox value="Banana">Banana</Checkbox> <Checkbox value="Mango" disabled> Mango </Checkbox> </CheckboxGroup> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Example 2: Along with the above example, we are creating another CheckboxGroup naming it as “List” and here we are adding a default value that will remain checked, in the value arr, here the value is “yes”.
App.js
import { CheckboxGroup, Checkbox } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { const onChangeHandler = (e) => { alert(e); }; return ( <div className="App"> <h4>React Suite CheckboxGroup Prop </h4> <CheckboxGroup name="FruitList" inline onChange={onChangeHandler}> <Checkbox value="Apple">Apple</Checkbox> <Checkbox value="Banana">Banana</Checkbox> <Checkbox value="Mango" disabled> Mango </Checkbox> </CheckboxGroup> <CheckboxGroup value={["Yes"]} name="List"> <h6>Do you like Geeksforneveropen?</h6> <Checkbox value="Yes">Yes</Checkbox> <Checkbox value="No">No</Checkbox> </CheckboxGroup> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm star
Output:
Reference: https://rsuitejs.com/components/checkbox/#code-lt-checkbox-group-gt-code
