React Suite Checkbox Group With Horizontal Layout

Last Updated : 08 Jun, 2022

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:

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:

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.

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" }}>GeeksforGeeks</h3>
                <h5>React Suite Checkbox Group With Horizontal Layout</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;

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 showed the dark mode variation of the Horizontal layout of checkbox group using CustomProvider.

src/App.js

import "rsuite/dist/rsuite.min.css";
import { Checkbox, CheckboxGroup, CustomProvider } from "rsuite";
import React from "react";

function App() {

    return (
        // CustomProvider for dark theme
        <CustomProvider theme="dark">
            <div className="App" style={{
                display: "flex", alignItems: "center",
                flexDirection: "column"
            }}>
                <header style={{
                    textAlign: "center", display: "block",
                    marginBottom: "30px"
                }}>
                    <h3 style={{ color: "green" }}>
                        GeeksforGeeks
                    </h3>
                    <h5>
                        React Suite Checkbox Group 
                        With Horizontal Layout
                    </h5>
                </header>

                {/* Dark Mode 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>
        </CustomProvider>
    );
}

export default App;