React Suite CheckPicker Disabled and read only
Last Updated :
08 Aug, 2022
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 Disabled and read-only. Checkpicker is very useful for selecting multiple items or selecting a group of data items. The checkpicker itself as well as its data items can be disabled and can also be used as a read-only component.
Syntax:
import { CheckPicker } from "rsuite";
Function App() {
return (
<CheckPicker
disabled
readOnly
value={value}
onChange={setValue} data={data}
/>
);
}
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 disabled checkpicker component along with disabled options.
App.js
import "rsuite/dist/rsuite.min.css" ;
import { CheckPicker } from "rsuite" ;
const data = [
"Java" ,
"C++" ,
"DSA" ,
"Web Development" ,
"Android Development" ,
].map((item) => ({
label: item,
value: item,
}));
export default function App() {
return (
<div>
<div style={{ textAlign: "center" }}>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite CheckPicker
Disabled and read only
</h4>
</div>
<div style={{
padding: 20,
textAlign: "center"
}}>
<label style={{ marginLeft: 10 }}>
Disabled CheckPicker:
</label>
<CheckPicker disabled data={data} />
<label style={{ marginLeft: 10 }}>
Disabled option:
</label>
<CheckPicker
data={data}
style={{ width: 224 }}
disabledItemValues={[ "Java" , "DSA" ]}
/>
</div>
</div>
);
}
|
Output:
Example 2: Below example demonstrates the read-only checkpicker component.
App.js
import "rsuite/dist/rsuite.min.css" ;
import { CheckPicker } from "rsuite" ;
const data = [
"Java" ,
"C++" ,
"DSA" ,
"Web Development" ,
"Android Development" ,
].map((item) => ({
label: item,
value: item,
}));
export default function App() {
return (
<div>
<div style={{ textAlign: "center" }}>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite CheckPicker
Disabled and read only
</h4>
</div>
<div style={{
padding: 20,
textAlign: "center"
}}>
<label style={{ marginLeft: 10 }}>
Read-only CheckPicker:
</label>
<CheckPicker
data={data}
readOnly
defaultValue={[ "Java" , "C++" ]}
/>
</div>
</div>
);
}
|
Output:
Reference: https://rsuitejs.com/components/check-picker/#disabled-and-read-only
Share your thoughts in the comments
Please Login to comment...