React Suite is a front-end library with a set of react components that are designed with keeping developers in mind. It helps to build scalable and responsive react interfaces in a fast and efficient way. In this article, we will be seeing React Suite Checkbox Indeterminate State.
The Checkbox component is used to present the user with a set of options, from which the user can select one or more options. When the checkbox is neither in a checked state nor in an unchecked state, then it is said to be in an indeterminate state.
React Suite Checkbox Indeterminate State Components:
- Checkbox: This is the checkbox component used to show a checkbox to the user.
React Suite Checkbox Indeterminate State Props:
- indeterminate: It is a boolean prop when true, set the checkbox to an indeterminate state.
- checked: It is also a boolean prop that tells whether the checkbox is checked or not. If it is set, the checkbox will be checked.
- inline: It is a boolean prop of the CheckboxGroup component which is used for the inline layout of the checkboxes.
Creating The React Application And Installing Module:
Step 1: Create the React application using the npx command:
npx create-react-app foldername
Step 2: After creating the project folder, move to it using the cd command:
cd foldername
Step 3: After creating the ReactJS application, Install the rsuite module so that we can use the checkbox component using the following command:
npm install rsuite
After following the above steps, the project structure will look like this:
Project Structure
Example 1: Now replace the code in the App.js file with the code below. Here, we used three checkboxes and when all of them will be checked, the above checkbox will be in the checked state and if any one or two will be checked then it will be in an indeterminate state.
App.js
import "rsuite/dist/rsuite.min.css"; import { Checkbox, CheckboxGroup } from "rsuite"; import React from "react"; function App() { const checkboxes = [1, 2, 3]; const [checked, setChecked] = React.useState([]); // Function to handle all checkbox check function handleCheckboxesCheckAll(checked, isChecked) { // if "isChecked" is "true" set "setChecked" // to checkboxes array or set it to empty array. setChecked(isChecked ? checkboxes : []); } function handleCheckboxChange(checked) { setChecked(checked); } return ( <div className="App" style={{ display: "flex", alignItems: "center", flexDirection: "column" }}> <header style={{ textAlign: "center", display: "block", marginBottom: "30px" }}> <h3 style={{ color: "green" }}> neveropen </h3> <h5> React Suite Checkbox Indeterminate State </h5> </header> <Checkbox indeterminate={checked.length > 0 && checked.length < checkboxes.length} checked={checked.length === checkboxes.length} onChange={handleCheckboxesCheckAll} style={{ display: "block" }} > Check All Checkboxes </Checkbox> {/* Checkbox Group with three checkboxes */} <CheckboxGroup inline name="checkboxGroup" value={checked} onChange={handleCheckboxChange}> <Checkbox key={1} value={1}> Checkbox {1} </Checkbox> <Checkbox key={2} value={2}> Checkbox {2} </Checkbox> <Checkbox key={3} value={3}> Checkbox {3} </Checkbox> </CheckboxGroup> </div> ); } export default App; |
Run the Application: Run the app using the below command from the root directory of the project.
npm start
Output: Go to http://localhost:3000/ in your browser to see the below output.
Example 2: The below example shows the use of a dark theme with a checkbox indeterminate state. To use the dark theme we used the CustomProvider component with the theme prop set to dark.
App.js
import "rsuite/dist/rsuite.min.css"; import { Checkbox, CheckboxGroup, CustomProvider } from "rsuite"; import React from "react"; function App() { const checkboxes = [1, 2, 3]; const [checked, setChecked] = React.useState([]); // Function to handle all checkbox check function handleCheckboxesCheckAll(checked, isChecked) { // if "isChecked" is "true" set "setChecked" to checkboxes array // or set it to empty array. setChecked(isChecked ? checkboxes : []); } function handleCheckboxChange(checked) { setChecked(checked); } return ( {/* Dark theme using CutomProvider */} <CustomProvider theme="dark"> <div className="App" style={{ display: "flex", alignItems: "center", flexDirection: "column" }}> <header style={{ textAlign: "center", display: "block", marginBottom: "30px" }}> <h3 style={{ color: "green" }}>neveropen</h3> <h5>React Suite Checkbox Indeterminate State</h5> </header> <Checkbox indeterminate={checked.length > 0 && checked.length < checkboxes.length} checked={checked.length === checkboxes.length} onChange={handleCheckboxesCheckAll} style={{ display: "block" }} > Check All Checkboxes </Checkbox> {/* Checkbox Group with three checkboxes */} <CheckboxGroup inline name="checkboxGroup" value={checked} onChange={handleCheckboxChange}> <Checkbox key={1} value={1}> Checkbox {1} </Checkbox> <Checkbox key={2} value={2}> Checkbox {2} </Checkbox> <Checkbox key={3} value={3}> Checkbox {3} </Checkbox> </CheckboxGroup> </div> </CustomProvider> ); } export default App; |
Output:
Reference: https://rsuitejs.com/components/checkbox/#indeterminate-state
