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>
);
}
|
Output:
Reference: https://rsuitejs.com/components/checkbox/#code-lt-checkbox-gt-code
Share your thoughts in the comments
Please Login to comment...