Sometimes, we want to add TypeScript types for React checkbox events and handlers.

In this article, we’ll look at how to add TypeScript types for React checkbox events and handlers.

How to add TypeScript types for React checkbox events and handlers?

To add TypeScript types for React checkbox events and handlers, we should set the change event object to the React.ChangeEvent<HTMLInputElement> type.

For instance, we write

const Foo = () => {
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    //...
  };
  return <input type="checkbox" onChange={onChange} />;
};

to add a check with a change event handler.

Then we set the e parameter of onChange to React.ChangeEvent<HTMLInputElement>.

Then we’ll get type checks and autocomplete for the e object.

Conclusion

To add TypeScript types for React checkbox events and handlers, we should set the change event object to the React.ChangeEvent<HTMLInputElement> type.