React Basics

React ES6

React Hooks

React Checkbox

React Checkbox

What you'll learn

  • Understand the main ideas in React Checkbox.
  • See a working example and explanation to help you learn by doing.
  • Follow a clear path to the next lesson in this topic.

When to use this lesson

Use this lesson when you want to understand the key concepts behind React Checkbox.

❮ Previous Next ❯

React Checkbox

Checkboxes in React are handled slightly differently than your standard text inputs. Instead of targeting e.target.value, you must use e.target.checked to determine the active boolean state of the checkbox.

Managing Checkbox State

import { useState } from 'react';


function CheckboxForm() {
  const [isChecked, setIsChecked] = useState(false);
  return <input type="checkbox" checked={isChecked} onChange={(e) => setIsChecked(e.target.checked)} />;
}

❮ Previous Next ❯