React Suite Checkbox Group With Horizontal Layout
React Suite is an open-source front-end library that comes with a set of React components built for enterprise products. It is a developer-friendly UI framework and supports the latest releases of all the major modern browsers.
In this article, we will be seeing React Suite Checkbox Group With Horizontal Layout. The checkbox elements inside a checkbox group can be displayed inline by using the inline attribute of the CheckboxGroup component.
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 With Horizontal Layout Attributes/Props:
- inline: It is a boolean attribute of the CheckboxGroup Component that when set display all the children of the checkbox group inline.
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:
Let us see some examples to understand React Suite Checkbox Group With Horizontal Layout.
Example 1: Now replace the code in the App.js file with the code below. In this example, we used the CheckboxGroup component with an inline attribute to make the child checkboxes display inline.
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 showed the dark mode variation of the Horizontal layout of checkbox group using CustomProvider.
Please Login to comment...