React Suite is an open-source front-end library that comes with a set of React components to make it easier for developers to develop a scalable and responsive website. In this article, we will be seeing React Suite Checkbox Group. The CheckboxGroup component is used to group similar checkboxes together to enhance the user experience.
React Suite Checkbox Group Components:
- Checkbox: The Checkbox component is used to show a checkbox input to the user.
- CheckboxGroup: This component is used to group the checkboxes together.
React Suite Checkbox Group Attributes/Props:
- inline: This attribute is used on the CheckboxGroup component to make the children display inline.
- disabled: This attribute is used on the Checkbox compone to disable the checkbox. It is a boolean attribute.
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:
Project Structure
Example 1: Now replace the code in the App.js file with the code below. In this example, we used the CheckboxGroup component to make two groups of checkboxes each containing four items.
src/App.js
import "rsuite/dist/rsuite.min.css"; import { Checkbox, CheckboxGroup } from "rsuite"; import React from "react"; Â Â function App() { Â Â Â Â Â Â return ( Â Â Â Â Â Â Â Â <div className="App" style={{ Â Â Â Â Â Â Â Â Â Â Â Â display: "flex", alignItems: "center", Â Â Â Â Â Â Â Â Â Â Â Â flexDirection: "column"Â Â Â Â Â Â Â Â }}> Â Â Â Â Â Â Â Â Â Â Â Â <header style={{ Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â textAlign: "center", display: "block", Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â marginBottom: "30px"Â Â Â Â Â Â Â Â Â Â Â Â }}> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <h3 style={{ color: "green" }}>neveropen</h3> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <h5>React Suite Checkbox Group</h5> Â Â Â Â Â Â Â Â Â Â Â Â </header> Â Â Â Â Â Â Â Â Â Â Â Â <CheckboxGroup name="checkboxGroup1"> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â {/* Checkbox Group 1 */} Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <p>CheckboxGroup 1</p> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Checkbox value={1}>Checkbox 1</Checkbox> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Checkbox value={2}>Checkbox 2</Checkbox> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Checkbox value={3}>Checkbox 3</Checkbox> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Checkbox value={4}>Checkbox 4</Checkbox> Â Â Â Â Â Â Â Â Â Â Â Â </CheckboxGroup> Â Â Â Â Â Â Â Â Â Â Â Â <hr /> Â Â Â Â Â Â Â Â Â Â Â Â <CheckboxGroup name="checkboxGroup2"> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â {/* Checkbox Group 2 */} Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <p>CheckboxGroup 2</p> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Checkbox value={5}>Checkbox 5</Checkbox> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Checkbox value={6}>Checkbox 6</Checkbox> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Checkbox value={7}>Checkbox 7</Checkbox> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Checkbox value={8}>Checkbox 8</Checkbox> Â Â Â Â Â Â Â Â Â Â Â Â </CheckboxGroup> Â Â Â Â Â Â Â Â </div> Â Â Â Â ); } Â Â export default App; |
Run the Application: Run your app using the following command from the root directory of the project.
npm start
Output: Go to http://localhost:3000/ in your browser to see the output.
Â
Example 2: In this example, we used the inline attribute of the CheckboxGroup component to make the children display inline.
src/App.js
import "rsuite/dist/rsuite.min.css"; import { Checkbox, CheckboxGroup } from "rsuite"; import React from "react"; Â Â function App() { Â Â Â Â return ( Â Â Â Â Â Â Â Â <div className="App" style={{ Â Â Â Â Â Â Â Â Â Â Â Â display: "flex", alignItems: "center", Â Â Â Â Â Â Â Â Â Â Â Â flexDirection: "column"Â Â Â Â Â Â Â Â }}> Â Â Â Â Â Â Â Â Â Â Â Â <header style={{ Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â textAlign: "center", display: "block", Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â marginBottom: "30px"Â Â Â Â Â Â Â Â Â Â Â Â }}> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <h3 style={{ color: "green" }}>neveropen</h3> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <h5>React Suite Checkbox Group Inline</h5> Â Â Â Â Â Â Â Â Â Â Â Â </header> Â Â Â Â Â Â Â Â Â Â Â Â Â Â {/* Inline Checkbox Group */} Â Â Â Â Â Â Â Â Â Â Â Â <p>Inline Checkbbox Group: </p> Â Â Â Â Â Â Â Â Â Â Â Â <CheckboxGroup inline name="checkboxGroup1"> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Checkbox value={1}>Checkbox 1</Checkbox> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Checkbox value={2}>Checkbox 2</Checkbox> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Checkbox disabled value={3}>Checkbox 3</Checkbox> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â <Checkbox value={4}>Checkbox 4</Checkbox> Â Â Â Â Â Â Â Â Â Â Â Â </CheckboxGroup> Â Â Â Â Â Â Â Â </div> Â Â Â Â ); } Â Â export default App; |
Output:
Â
Reference: https://rsuitejs.com/components/checkbox/#checkbox-group
