Checkbox

import { Checkbox } from '@dr.pogodin/react-utils';

The Checkbox component implements checkboxes themed with React Themes.

Demo (expand to see the source code)

Managed two-states checkbox

Managed three-states checkbox

Managed three-states checkbox

import { type FunctionComponent, useState } from 'react';

import { Checkbox } from '@dr.pogodin/react-utils';

const CheckboxExample: FunctionComponent = () => {
  const [checkbox2, setCheckbox2] = useState<boolean>(true);
  const [checkbox3a, setCheckbox3a] = useState<'indeterminate' | boolean>('indeterminate');
  const [checkbox3b, setCheckbox3b] = useState<'indeterminate' | boolean>('indeterminate');
  return (
    <>
      <Checkbox
        checked={checkbox2}
        label="Managed two-states checkbox"
        onChange={(e) => {
          setCheckbox2(e.target.checked);
        }}
      />
      <Checkbox
        checked={checkbox3a}
        label="Managed three-states checkbox"
        onChange={() => {
          switch (checkbox3a) {
            case 'indeterminate':
              setCheckbox3a(true);
              break;
            case true:
              setCheckbox3a(false);
              break;
            case false:
            default:
              setCheckbox3a('indeterminate');
          }
        }}
      />
      <Checkbox
        checked={checkbox3b}
        disabled
        label="Managed three-states checkbox"
        onChange={() => {
          switch (checkbox3b) {
            case 'indeterminate':
              setCheckbox3b(true);
              break;
            case true:
              setCheckbox3b(false);
              break;
            case false:
            default:
              setCheckbox3b('indeterminate');
          }
        }}
      />
    </>
  );
};

export default CheckboxExample;

Properties

• checked — boolean | "indeterminate" | undefined — Checkbox value.

  info

  To implement indeterminate state we don't use indeterminate property of the underlying <input> element, we rather simply append indeterminate theme class to the underlying <input> and style it accordingly.

  There won't be a way to detect the current «indeterminate» state of the checkbox from the event argument of onChange hook, it will be necessary to fully manage it via the external state.

• disabled — boolean | undefined — Disables the checkbox.

• label — React.ReactNode — Checkbox label.

• onChange — function — State change handler.

• testId — string | undefined — Sets data-testid attribute to the underlying <input> element; it is intended to faciliate testing with @testing-library/dom. Ignored in production builds.

• theme — CheckboxTheme — Ad hoc React Themes theme.

• Accepts other props of themed components.

CheckboxTheme

Valid theme keys are:

• checkbox — Applied to the underlying checkbox <input> element.

• container — Applied to the root checkbox element.

• disabled — Applied to the root checkbox container if the component is disabled.

• indeterminate — Applied to the underlying <input> element when the component is in the «indeterminate» state.

• label — Applied to the checkbox label element.

See React Themes documentation for details on visual component theming.