React Suite Checkbox Group
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:
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:
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.
Run the Application: Run your app using the following command from the root directory of the project.
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.
Please Login to comment...