React Checkbox

The Checkbox component is a versatile UI element enabling binary selections in forms, with customizable colors for enhanced clarity.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let’s add the React Checkbox component to the project.

Installing Syncfusion® React packages

To use the Checkbox component, install the @syncfusion/react-buttons package:

npm install @syncfusion/react-buttons

Adding CSS reference

Import the Checkbox component’s required CSS references as follows in src/App.css.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-buttons/styles/material.css';

Adding Checkbox component

To include the Checkbox component in your application, import the Checkbox from the @syncfusion/react-buttons package in App.tsx.

import { Checkbox } from "@syncfusion/react-buttons";

Add the Checkbox component in application as shown in below code example.

import { Checkbox } from '@syncfusion/react-buttons';
import './App.css';

export default function App() {
    return (
    <div className="component-section">
        <Checkbox label='Checkbox' defaultChecked/>
    </div>
    );
}

Run the project

To run the project, use the following command:

npm run dev

The following example demonstrates how to render a simple Checkbox component. By setting the defaultChecked attribute to true, the checkbox will be checked by default.

Types

This section shows how to create and use basic Checkbox in your application, highlighting their various states: checked, unchecked, disabled, and indeterminate. The disabled attribute renders the checkbox inactive.

Size

Easily customize the Checkbox's size to match your design requirements using its built-in sizing properties.

Label

Incorporating labels for Checkbox enhances accessibility and usability by clearly indicating the purpose or option linked to each checkbox.

Label placement

Adjust label placement relative to the Checkbox for design needs.

Intermediate

Checkbox can also have an indeterminate state, useful for parent-child relationships where a parent's state reflects its children's selections.

Customization

Color

Custom Checkbox colors are achieved through color property, allowing you to style its appearance and states for better design integration and visual appeal.

Frame

This CSS-styled custom Checkbox enhances the default design, improving size, color, and border for a modern, sleek appearance.

Form validation

Implement Checkbox validation strategies to ensure user input is correctly validated and formatted before submission for a smooth user experience.

Accessibility

The Checkbox component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Checkbox component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The Checkbox component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Checkbox component:

Keyboard interaction

The Checkbox component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Checkbox component.