Why should you care?

Terms acceptance, gift wrap options, and payment method pickers use these controls.

See it live — copy this example

Paste into src/App.jsx (or the file noted in the steps). Save and watch the browser update.

import { useState } from 'react';

function CheckoutOptions() {
  const [giftWrap, setGiftWrap] = useState(false);
  const [pay, setPay] = useState('upi');

  return (
    <>
      <label>
        <input type="checkbox" checked={giftWrap} onChange={e => setGiftWrap(e.target.checked)} />
        Gift wrap
      </label>
      <label>
        <input type="radio" name="pay" checked={pay === 'card'} onChange={() => setPay('card')} />
        Card
      </label>
      <label>
        <input type="radio" name="pay" checked={pay === 'upi'} onChange={() => setPay('upi')} />
        UPI
      </label>
    </>
  );
}

Run Example »

Edit the code and click Run to see the result update live.

What happened?

• checkbox uses e.target.checked.
• radio sets state to a string; checked compares current state to that option.

Try it yourself

1. Add agree-to-terms checkbox — disable submit until checked.
2. Three radio options for delivery speed.
3. Log giftWrap and pay on a button click.
4. Change text or labels in the example and save — watch the browser update.
5. Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

checkbox: checked + onChange. radio: same name, checked={state === value}. Wrap in label for bigger click area.