@react-aria/checkbox

What is @react-aria/checkbox?

@react-aria/checkbox is a React library that provides accessible checkbox components. It is part of the React Aria collection, which aims to provide a set of hooks and components that help developers build accessible web applications. The package ensures that checkboxes are fully accessible and compliant with ARIA standards.

What are @react-aria/checkbox's main functionalities?

Basic Checkbox

This code demonstrates how to create a basic accessible checkbox using the @react-aria/checkbox package. The useCheckbox hook is used to manage the checkbox state and ARIA attributes.

import { useCheckbox } from '@react-aria/checkbox';
import { useToggleState } from '@react-stately/toggle';

function Checkbox(props) {
  let state = useToggleState(props);
  let ref = React.useRef();
  let { inputProps } = useCheckbox(props, state, ref);

  return (
    <label>
      <input {...inputProps} ref={ref} />
      {props.children}
    </label>
  );
}

Indeterminate Checkbox

This code demonstrates how to create an indeterminate checkbox using the @react-aria/checkbox package. The isIndeterminate property is used to set the checkbox to an indeterminate state.

import { useCheckbox } from '@react-aria/checkbox';
import { useToggleState } from '@react-stately/toggle';

function IndeterminateCheckbox(props) {
  let state = useToggleState(props);
  let ref = React.useRef();
  let { inputProps } = useCheckbox({ ...props, isIndeterminate: true }, state, ref);

  return (
    <label>
      <input {...inputProps} ref={ref} />
      {props.children}
    </label>
  );
}

Custom Styled Checkbox

This code demonstrates how to create a custom styled checkbox using the @react-aria/checkbox package. The checkbox is styled with custom colors and layout.

import { useCheckbox } from '@react-aria/checkbox';
import { useToggleState } from '@react-stately/toggle';

function CustomCheckbox(props) {
  let state = useToggleState(props);
  let ref = React.useRef();
  let { inputProps } = useCheckbox(props, state, ref);

  return (
    <label style={{ display: 'flex', alignItems: 'center' }}>
      <input {...inputProps} ref={ref} style={{ marginRight: 8 }} />
      <span style={{ color: state.isSelected ? 'green' : 'red' }}>{props.children}</span>
    </label>
  );
}

Other packages similar to @react-aria/checkbox

react-checkbox-group

react-checkbox-group is a package that provides a simple way to group multiple checkboxes in a React application. It focuses on managing the state of a group of checkboxes, but it does not provide the same level of accessibility features as @react-aria/checkbox.

react-toggle

react-toggle is a package that provides a highly customizable toggle switch component for React. While it is not specifically focused on checkboxes, it offers similar functionality for creating toggleable inputs. However, it may require additional work to ensure full accessibility compliance compared to @react-aria/checkbox.

rc-checkbox

rc-checkbox is a React component for creating checkboxes with additional features like animations and custom styles. It provides more customization options but does not inherently focus on accessibility as much as @react-aria/checkbox.

README

@react-aria/checkbox

This package is part of react-spectrum. See the repo for more details.