React Suite Checkbox ts:ValueType Prop

Last Updated : 29 Aug, 2022

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. It is a set of react component libraries for enterprise system products. It is a well-thought-out and developer-friendly UI framework.

The checkbox component is used to select one or more values from a set. The ts:ValueType Prop helps to determine whether to select a value from the checkbox group. It can be an array of strings or numbers based on check box values.

Syntax:

type ValueType = string | number;

Step 1: Create a React.js application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e foldername, move into that directory using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install rsuite

Project Structure: The project structure will look like this:

Example: Let’s understand the implementation through the example:

Example 1: In this example, we will use the Checkbox component with a value prop, where we will see what is the syntax of ts:ValueType. In the CheckBox, state array whichever check box fields we add as value will be marked as selected. In this example, the array is empty so by default all the check boxes will be unmarked. CheckBox state is being modified whenever you mark or unmark check box fields.

App.js: Write down the below code in App.js file, where App is our default component provided by React in which code is being written.

Javascript

import React, { useState } from "react";
import { Checkbox, CheckboxGroup } from "rsuite";
import "rsuite/dist/rsuite.css";
 
const App = () => {
 
    // Initializing CheckBox state
    const [value, setValue] = useState([]);
 
    // Array to render CheckBox component 
    // for these fields
    const checkInputFields = ["Technical",
        "Non-Technical", "Content Writer",
        "Content Reviewer"]
 
    // Function that will execute when you
    // select/unselect check box
    const checkBoxChangeHandler = (value) => {
        console.log(value, "onChange");
        setValue(value);
    };
 
    return (
        <center>
            <h3>GeeksForGeeks</h3>
            <h4>Checkbox component</h4>
            <br />
            <CheckboxGroup
                inline
                value={value}
                onChange={(value) =>
                    checkBoxChangeHandler(value)}
            >
                {checkInputFields.map((checkBoxValue, index) => {
                    return <Checkbox key={index}
                        value={checkBoxValue}>{
                            checkBoxValue}
                    </Checkbox>
                })}
            </CheckboxGroup>
        </center>
    );
};
 
export default App;

Steps to run the program: To run the application execute the below command from the root directory of the project:

npm start

Output: Your web application will be live on “http://localhost:3000”.Now, you will see the following output:

Example 2: In this example, we will use the Checkbox component with the value prop. Let us initialize the checkbox state array with two field values, you will see by default those two fields will be marked as selected in the check box. In this example, we have initialized the checkbox state with two values “Technical”, and “Content Writer” respectively. In the output, you will see by default these two check box fields will be marked as selected.

App.js: Write down the below code in App.js file, where App is our default component provided by React in which code is being written.

Javascript

import React, { useState } from "react";
import { Checkbox, CheckboxGroup } from "rsuite";
import "rsuite/dist/rsuite.css";
 
const App = () => {
 
    // Initializing CheckBox state
    const [value, setValue] = 
        useState(["Technical", "Content Writer"]);
 
    // Function that will execute when you 
    // select/unselect check box
    const checkBoxChangeHandler = (value) => {
        console.log(value, "onChange");
        setValue(value);
    };
 
    return (
        <center>
            <h3>GeeksForGeeks</h3>
            <h4>Checkbox component</h4>
            <br />
 
            <CheckboxGroup
                inline
                value={value}
                onChange={(value) => checkBoxChangeHandler(value)}
            >
                <Checkbox value={"Technical"}>
                    Technical
                </Checkbox>
                <Checkbox value={"Non-Technical"}>
                    Non-Technical
                </Checkbox>
                <Checkbox value={"Content Writer"}>
                    Content Writer
                </Checkbox>
                <Checkbox value={"Content Reviewer"}>
                    Content Reviewer
                </Checkbox>
            </CheckboxGroup>
        </center>
    );
};
 
export default App;