React Suite Checkbox Accessibility

Last Updated : 30 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 Checkbox Accessibility. The<Checkbox> component is used to select one or more values from a set. Accessibility is a tool or a way that enables a website accessible easily by the user by providing features like buttons, breadcrumbs, checkboxes or dropdowns, etc.

As per WAI-ARIA, the checkbox has two Dual-state (checked or not checked) and Tri-state(partially checked) widgets. These widgets can be accomplished by setting the aria-checked state to either 'true', 'false', or 'mixed' in the case of tri-state.

Syntax:

<Checkbox value="A" aria-checked="true || false">
    ...
</Checkbox>

Note: In the above syntax, aria-checked is not written while using the checkbox while development but it determines that when the checkbox is checked, its state is set to 'true' or vice versa.

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:

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Example 1: The below example demonstrates the usage of the true state in the checkbox component.

JavaScript

import { Checkbox } from "rsuite";
import "rsuite/dist/rsuite.min.css";

export default function App() {
  return (
    <div>
      <div style={{ textAlign: "center" }}>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
          React Suite Checkbox Accessibility
         </h4>
      </div>
      <div style={{ padding: 20, textAlign: "center" }}>
        <div style={{ width: 300 }}>
            <Checkbox value="A">DSA</Checkbox>
            <Checkbox value="B">Development</Checkbox>
        </div>
      </div>
    </div>
  );
}

Output:

Note: In the above output, when the checkbox is checked, the property aria-checked given by the WAI-ARIA is set to true.

Example 2: The below example demonstrates the usage of the false state in the checkbox component.

JavaScript

import { Checkbox } from "rsuite";
import "rsuite/dist/rsuite.min.css";

export default function App() {

  return (
    <div>
      <div style={{ textAlign: "center" }}>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
           React Suite Checkbox Accessibility
        </h4>
      </div>
      <div style={{ padding: 20, textAlign: "center" }}>
        <div style={{ width: 300 }}>
            <Checkbox value="A" checked>DSA</Checkbox>
            <Checkbox value="B">Development</Checkbox>
        </div>
      </div>
    </div>
  );
}