Skip Navigation
React Magma

Indeterminate Checkbox

The IndeterminateCheckbox component is similar to the Checkbox component, except that instead of accepting a boolean checked value, it takes the `status` prop, with three possible statuses: `indeterminate`, `checked` and `unchecked`. The default status is `unchecked`.

Basic Usage

The status is used to represent the state of a group of checkboxes that goes underneath it.

  • checked means all of the checkboxes in the group are checked.
  • indeterminate means that some, but not all, checkboxes in the group are checked.
  • unchecked means that none of the checkboxes in the group are checked.

The indeterminate status cannot be changed by direct user action, it can only be changed by updating the prop.

import React from 'react';


import {
  Checkbox,
  FormGroup,
  IndeterminateCheckbox,
  IndeterminateCheckboxStatus,
  magma,
} from 'react-magma-dom';


export function Example() {
  const [checkedItems, setCheckedItems] = React.useState<Array<boolean>>([
    true,
    false,
  ]);


  const status: IndeterminateCheckboxStatus = checkedItems.every(Boolean)
    ? IndeterminateCheckboxStatus.checked
    : checkedItems.some(Boolean)
      ? IndeterminateCheckboxStatus.indeterminate
      : IndeterminateCheckboxStatus.unchecked;


  function handleUpdateIndeterminateChecked(
    event: React.ChangeEvent<HTMLInputElement>
  ) {
    setCheckedItems([event.target.checked, event.target.checked]);
  }


  function handleUpdateRedChecked(event: React.ChangeEvent<HTMLInputElement>) {
    setCheckedItems([event.target.checked, checkedItems[1]]);
  }


  function handleUpdateBlueChecked(event: React.ChangeEvent<HTMLInputElement>) {
    setCheckedItems([checkedItems[0], event.target.checked]);
  }


  return (
    <FormGroup labelText="Categories">
      <IndeterminateCheckbox
        onChange={handleUpdateIndeterminateChecked}
        status={status}
        labelText="Colors"
      />
      <div style={{ marginLeft: magma.spaceScale.spacing08 }}>
        <Checkbox
          checked={checkedItems[0]}
          onChange={handleUpdateRedChecked}
          labelText="Red"
        />
        <Checkbox
          checked={checkedItems[1]}
          onChange={handleUpdateBlueChecked}
          labelText="Blue"
        />
      </div>
    </FormGroup>
  );
}

Inverse

import React from 'react';


import {
  IndeterminateCheckbox,
  IndeterminateCheckboxStatus,
  Card,
  CardBody,
} from 'react-magma-dom';


export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <IndeterminateCheckbox
          status={IndeterminateCheckboxStatus.indeterminate}
          labelText="Colors"
          isInverse
        />
      </CardBody>
    </Card>
  );
}

Indeterminate Checkbox Props

Any other props supplied will be provided to the Checkbox Component, except for the checked prop.

status

Required

Description

Status of the indeterminate, three-state checkbox, which includes and indeterminate (e.g. mixed) option.

Type

enum, one of:
IndeterminateCheckboxStatus.checked
IndeterminateCheckboxStatus.indeterminate
IndeterminateCheckboxStatus.unchecked

Default

IndeterminateCheckboxStatus.unchecked

On this page

Deploys by Netlify