React Suite CheckPicker With a label

React Suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we’ll learn about React suite Checkpicker with a Label. 

The Checkpicker Component is very useful for selecting multiple items or selecting a group of data items. To display a label with Checkpicker, a label prop is used that displays the text at the beginning of the toggle button.

Syntax:

<CheckPicker label="..."/>

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite npm package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Example 1: Below example demonstrates the usage of a label with the Checkpicker component.

Output:

Example 2: Below example demonstrates the subtle appearance of the label with the Checkpicker component.

Output:

Reference: https://rsuitejs.com/components/check-picker/#with-a-label