Indeterminate checkbox in React JSX

Question

How do I render an indeterminate checkbox via JSX?

Here's what I've tried:

function ICB({what}) {
  return <input type="checkbox"
                checked={what === "checked"} 
                indeterminate={what === "indeterminate"} />;
}

However, indeterminate is not an attribute on the HTMLElement, but a property. How do I set properties from React / JSX?

---

Solution:

As most of the answers below use findDOMNode or string refs, both of which are no longer considered good practice in React, I've written a more modern implementation:

function ICB() {
  const [state, setState] = React.useState(0);
  const indetSetter = React.useCallback(el => {
    if (el && state === 2) {
      el.indeterminate = true;
    }
  }, [state]);
  const advance = () => setState(prev => (prev + 1) % 3);
  
  return <input type="checkbox"
                checked={state === 1}
                ref={indetSetter}
                onClick={advance} />;
}
                
ReactDOM.render(<ICB />, document.getElementById("out"));

<div id="out"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

Answer 1

You can also use the ref function directly:

ReactDOM.render(
  <label>
    <input
      type="checkbox"
      ref={input => {
        if (input) {
          input.indeterminate = true;
        }
      }}
    />
    {' '}
    Un test
  </label>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

I would probably create a composite component that encapsulates the necessary hooks to set or unset the checkbox's indeterminate property. It looks like you're using ES2015 syntax, so I'll use some of those features here.

class IndeterminateCheckbox extends React.Component {
  componentDidMount() {
    if (this.props.indeterminate === true) {
      this._setIndeterminate(true);
    }
  }

  componentDidUpdate(previousProps) {
    if (previousProps.indeterminate !== this.props.indeterminate) {
      this._setIndeterminate(this.props.indeterminate);
    }
  }

  _setIndeterminate(indeterminate) {
    const node = React.findDOMNode(this);
    node.indeterminate = indeterminate;
  }

  render() {
    const { indeterminate, type, ...props } = this.props;
    return <input type="checkbox" {...props} />;
  }
}

// elsewhere

render() {
  return <IndeterminateCheckbox
           checked={this.props.state === "checked"} 
           indeterminate={this.props.state === "indeterminate"} />
}

Working example: https://jsbin.com/hudemu/edit?js,output

Answer 3

You can use the componentDidMount step (which is invoked after the initial rendering) to set that property:

componentDidMount() {
    React.findDOMNode(this).indeterminate = this.props.state === "indeterminate";
}

If you want that property to be updated with subsequent renders, do the same thing in componentDidUpdate also.

Answer 4

I'd suggest creating a simple component (code ported from coffeescript so mind you, might have some simple typos):

const React = require('react');

module.exports = class IndeterminateCheckbox extends React.Component {
    componentDidMount() {
        this.refs.box.indeterminate = this.props.indeterminate;
    }

    componentDidUpdate(prevProps, prevState) {
        if(prevProps.indeterminate !== this.props.indeterminate) {
            this.refs.box.indeterminate = this.props.indeterminate;
        }
    }

    render() {
        return <input {...this.props} ref="box" type="checkbox"/>;
    }

}

Now you have a simple component that behaves exactly like a checkbox, that supports the indeterminate prop. Note there's plenty of room for improvements here, namely setting propTypes and proper defaults for some props, and of course implementing componentShouldUpdate to only do something when needed.

Answer 5

An alternative would be to use a ref attribute with a callback to set the property on the DOM node. For example:

render: function() {
  return (
    <input
        type="checkbox"
        ref={function(input) {
          if (input != null) {
            React.findDOMNode(input).indeterminate = this.props.indeterminate;
          }}
        {...this.props} />
  )
}

Answer 6

Dont use React.findDOMNode(this). It is risky.

export class SelectAll extends Component {
constructor(props) {
    super(props);
    this.state = {
        checked: false
    };
    this.myRef = React.createRef();
    this.onChange = this.onChange.bind(this);
    this.update = this.update.bind(this);
}

onChange(e) {
    const checked = e.target.checked;
    this.setState({
        checked: checked
    });
    this.selectAllNode.indeterminate = false;
}

update(state: {
    checked: Boolean,
    indeterminate: Boolean
}) {
    this.setState({
        checked: state.checked
    });
    this.myRef.current.indeterminate = state.indeterminate;
}

render() {
    return ( <
        input type = "checkbox"
        name = "selectAll"
        checked = {
            this.state.checked
        }
        onChange = {
            this.onChange
        }
        ref = {
            this.myRef
        }
        />
    );
}
}

Answer 7

React v15 implementation:

import React from 'react';

export default class Checkbox extends React.Component {
    componentDidMount() {
        this.el.indeterminate = this.props.indeterminate;
    }

    componentDidUpdate(prevProps, prevState) {
        if(prevProps.indeterminate !== this.props.indeterminate) {
            this.el.indeterminate = this.props.indeterminate;
        }
    }

    render() {
        const {indeterminate, ...attrs} = this.props;
        return <input ref={el => {this.el = el}} type="checkbox" {...attrs}/>;
    }
}

Answer 8

Taken from my tutorial which shows how this works with the recent React features. I hope this helps someone who stumbles upon this older question:

const App = () => {
  const [checked, setChecked] = React.useState(CHECKBOX_STATES.Empty);
 
  const handleChange = () => {
    let updatedChecked;
 
    if (checked === CHECKBOX_STATES.Checked) {
      updatedChecked = CHECKBOX_STATES.Empty;
    } else if (checked === CHECKBOX_STATES.Empty) {
      updatedChecked = CHECKBOX_STATES.Indeterminate;
    } else if (checked === CHECKBOX_STATES.Indeterminate) {
      updatedChecked = CHECKBOX_STATES.Checked;
    }
 
    setChecked(updatedChecked);
  };
 
  return (
    <div>
      <Checkbox
        label="Value"
        value={checked}
        onChange={handleChange}
      />
 
      <p>Is checked? {checked}</p>
    </div>
  );
};

const Checkbox = ({ label, value, onChange }) => {
  const checkboxRef = React.useRef();
 
  React.useEffect(() => {
    if (value === CHECKBOX_STATES.Checked) {
      checkboxRef.current.checked = true;
      checkboxRef.current.indeterminate = false;
    } else if (value === CHECKBOX_STATES.Empty) {
      checkboxRef.current.checked = false;
      checkboxRef.current.indeterminate = false;
    } else if (value === CHECKBOX_STATES.Indeterminate) {
      checkboxRef.current.checked = false;
      checkboxRef.current.indeterminate = true;
    }
  }, [value]);
 
  return (
    <label>
      <input ref={checkboxRef} type="checkbox" onChange={onChange} />
      {label}
    </label>
  );
};