React Suite <Checkbox> Props

Last Updated : 29 Jun, 2022

A 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 Prop <Checkbox>. <Checkbox> component is used to select one or more values from a set.

<Checkbox> Props:

checked: It indicates whether the checkbox is selected or not.
defaultChecked: It specifies the initial state of whether the checkbox is selected or not.
disabled: It disables the checkbox when this is set to true.
id: It denotes the general id attribute of the checkbox.
indeterminate: It denotes the indeterminate checked state of the checkbox.
inline: It is used for the Inline layout.
inputRef: It denotes the Ref of the input element.
name: It denotes the name attribute of the checkbox.
onChange: It is the callback function that is triggered when the state changes.
title: It denotes the HTML title.
value: It denotes the value of CheckboxGroup.

Syntax:

<Checkbox checked title="Yes" 
    onChange={handleCheck} value="A">
        Default
</Checkbox>

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 node 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 defaultChecked <Checkbox> props.

Javascript

import "rsuite/dist/rsuite.min.css"; 
import { Checkbox } from "rsuite"; 
  
export default function App() { 
  
  return ( 
    <center> 
      <div> 
        <h2>GeeksforGeeks</h2> 
        <h4 style={{ color: "green" }}> 
            React Suite Checkbox Prop</h4> 
  
        <div style={{ marginTop: 20, width: 340 }}> 
            <Checkbox defaultChecked>  
                default checked</Checkbox> 
            <Checkbox> Check it</Checkbox> 
        </div> 
      </div> 
    </center> 
  ); 
} 

Output:

Example 2: Below example demonstrates the disabled, name, value, title, <Checkbox> props.

Javascript

import "rsuite/dist/rsuite.min.css"; 
import { Checkbox } from "rsuite"; 
  
export default function App() { 
  
  return ( 
    <center> 
      <div> 
        <h2>GeeksforGeeks</h2> 
        <h4 style={{ color: "green" }}> 
            React Suite Checkbox Prop</h4> 
  
        <div style={{ marginTop: 20, width: 340 }}> 
            <Checkbox name="chk" value={'A'}  
                title="ans"> Yes</Checkbox> 
            <Checkbox disabled> Disabled</Checkbox> 
        </div> 
      </div> 
    </center> 
  ); 
} 