@react-aria/checkbox

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>
  );
}