Indeterminate checkboxes are a little more complex. A generic solution is to wrap your checkbox in a HOC; however, with our so-called "soft" checkboxes this becomes a little tricky — mostly because there's more than one way we can make an indeterminate checkbox.

Using Classes

If you're using the Component or PureComponent class then we can manage indeterminate through internal state. This solution is great if you're using class components and don't need "library-like" flexibility.

Indeterminate
Apply
Show Code

Need something reusable? Don't want internal state? Check out the Using a HOC section.

Using Hooks

If you're one the awesome people getting your hands dirty with hooks then this is for you! We can rewrite our class component using hooks with ease:

Indeterminate
Apply
Show Code

Using a Custom Hook

If you're developing a library then you might want to ease consumer pains. One of the many ways this can be done is using a custom hook. If you're using babel, webpack, rollup, or another modern bundler then you can export your custom hook so consumers which makes this bit reusable.

Indeterminate
Apply
Show Code

Using a HOC

The last main way to expose indeterminate functionality is by creating a HOC. This is a more verbose solution that using a custom hook, but it might more suitable. Given the unique nature of HOCs, a simple example is provided below from Codesandbox which demonstrates using an HOC and ref to make a native HTML checkbox indeterminate.