Why should you care?

Product descriptions, country pickers, and quantity dropdowns use these elements daily.

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 ProductForm() {
  const [desc, setDesc] = useState('');
  const [size, setSize] = useState('m');

  return (
    <>
      <textarea rows={4} value={desc} onChange={e => setDesc(e.target.value)} />
      <select value={size} onChange={e => setSize(e.target.value)}>
        <option value="s">Small</option>
        <option value="m">Medium</option>
        <option value="l">Large</option>
      </select>
    </>
  );
}

Run Example »

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

What happened?

• select value must match an option value.
• textarea content is value=, not children text, when controlled.

Try it yourself

1. Add a textarea for feedback.
2. Add a select for quantity 1–5.
3. Show desc and size below the form in a

   .

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.