Radio Buttons, Checkboxes and Select

Begin with one question:

How many choices may the customer select?

The simple rule is:

Radio  = one from a group
Checkbox = zero or many
Select = one from a dropdown

The customer must choose one delivery method.

File: src/components/DeliveryForm.tsx

export default function DeliveryForm() {
  // This function runs when the form is submitted.
  function handleSubmit(formData: FormData) {
    // Get the selected delivery method.
    const delivery = formData.get("delivery");

    // Show the result in the console.
    console.log("Delivery:", delivery);
  }

  return (
    <form action={handleSubmit}>
      <h3>Choose delivery method:</h3>

      <label>
        <input
          type="radio"
          name="delivery"
          value="pickup"
          defaultChecked
        />
        Pickup
      </label>

      <label>
        <input
          type="radio"
          name="delivery"
          value="courier"
        />
        Courier
      </label>

      <button type="submit">Continue</button>
    </form>
  );
}

Browser Result

Why Does Only One Stay Selected?

Both radio buttons have the same name:

name="delivery"

The browser treats them as one group.

Their values are different:

value="pickup"
value="courier"

The value tells FormData which option was selected.

These three parts have different jobs:

Read the selected radio value with get():

const delivery = formData.get("delivery");

Use get() because a radio group submits one selected value.

If nothing is selected, the result is null. Using defaultChecked gives the group a starting choice.

Common Radio Mistake

These are not one group because their names are different:

<input type="radio" name="pickup" value="pickup" />
<input type="radio" name="courier" value="courier" />

Remember:

Same name = one radio group
Different value = different options

A customer can choose more than one pizza extra.

File: src/components/ExtrasForm.tsx

export default function ExtrasForm() {
  function handleSubmit(formData: FormData) {
    const extras = formData.getAll("extras");

    console.log("Extras:", extras);
  }

  return (
    <form action={handleSubmit}>
      <fieldset>
        <legend>Pizza extras</legend>

        <label>
          <input
            type="checkbox"
            name="extras"
            value="extra-cheese"
          />
          Extra cheese
        </label>

        <label>
          <input
            type="checkbox"
            name="extras"
            value="olives"
          />
          Olives
        </label>

        <label>
          <input
            type="checkbox"
            name="extras"
            value="garlic-sauce"
          />
          Garlic sauce
        </label>
      </fieldset>

      <button type="submit">Add extras</button>
    </form>
  );
}

Browser Result

All checkboxes use name="extras", so we can collect their selected values together.

Unlike radio buttons, checkboxes do not turn each other off.

Use getAll() when one field name can have several submitted values:

const extras = formData.getAll("extras");

Possible results:

Nothing selected:
[]

Extra cheese selected:
["extra-cheese"]

Extra cheese and olives selected:
["extra-cheese", "olives"]

getAll() always returns an array. When nothing matches, it returns an empty array.

Compare the methods:

Check for One Specific Extra

function handleSubmit(formData: FormData) {
  const extras = formData.getAll("extras");
  const hasOlives = extras.includes("olives");

  console.log("Olives selected:", hasOlives);
}

An unchecked checkbox does not submit false. It simply adds no value.

Always provide a useful value. Without one, a checked checkbox normally submits the text on.

A select menu saves space when the customer chooses one item from a list.

File: src/components/DeliveryTimeForm.tsx

import { useId } from "react";

export default function DeliveryTimeForm() {
  const deliveryTimeId = useId();

  function handleSubmit(formData: FormData) {
    const deliveryTime = formData.get("deliveryTime");

    if (typeof deliveryTime === "string") {
      console.log("Delivery time:", deliveryTime);
    }
  }

  return (
    <form action={handleSubmit}>
      <label htmlFor={deliveryTimeId}>Delivery time</label>

      <select
        id={deliveryTimeId}
        name="deliveryTime"
        defaultValue=""
        required
      >
        <option value="" disabled>
          Choose a delivery time
        </option>
        <option value="as-soon-as-possible">
          As soon as possible
        </option>
        <option value="18-00">18:00</option>
        <option value="19-00">19:00</option>
      </select>

      <button type="submit">Continue</button>
    </form>
  );
}

Browser Result

useId connects the label and select.

name="deliveryTime" gives the submitted field its name.

Each <option> has visible text and a submitted value.

defaultValue sets the select's first value:

<select name="deliveryTime" defaultValue="">

It selects the option whose value is an empty string:

<option value="">Choose a delivery time</option>

This looks like a placeholder, but a select does not have a real placeholder attribute.

If the customer must choose another option, use required and disable the empty option:

<select name="deliveryTime" defaultValue="" required>
  <option value="" disabled>
    Choose a delivery time
  </option>
  <option value="18-00">18:00</option>
</select>

Visible Text and Submitted Value

<option value="18-00">Today at 18:00</option>

The customer sees:

Today at 18:00

FormData receives:

18-00

The visible description can be friendly while the submitted value remains short and predictable.

Now use radio buttons, checkboxes, and a select in one form.

File: src/components/PizzaOptionsForm.tsx

import { useId } from "react";

export default function PizzaOptionsForm() {
  const formId = useId();
  const deliveryTimeId = formId + "-delivery-time";

  function handleOrder(formData: FormData) {
    const delivery = formData.get("delivery");
    const extras = formData.getAll("extras");
    const deliveryTime = formData.get("deliveryTime");

    console.log("Delivery:", delivery);
    console.log("Extras:", extras);
    console.log("Delivery time:", deliveryTime);
  }

  return (
    <form action={handleOrder}>
      <h2>Choose your order options</h2>

      <fieldset>
        <legend>Delivery method</legend>

        <label>
          <input
            type="radio"
            name="delivery"
            value="pickup"
            defaultChecked
          />
          Pickup
        </label>

        <label>
          <input
            type="radio"
            name="delivery"
            value="courier"
          />
          Courier
        </label>
      </fieldset>

      <fieldset>
        <legend>Pizza extras</legend>

        <label>
          <input
            type="checkbox"
            name="extras"
            value="extra-cheese"
          />
          Extra cheese
        </label>

        <label>
          <input
            type="checkbox"
            name="extras"
            value="olives"
          />
          Olives
        </label>
      </fieldset>

      <label htmlFor={deliveryTimeId}>Delivery time</label>
      <select
        id={deliveryTimeId}
        name="deliveryTime"
        defaultValue=""
        required
      >
        <option value="" disabled>Choose a time</option>
        <option value="as-soon-as-possible">
          As soon as possible
        </option>
        <option value="18-00">18:00</option>
      </select>

      <button type="submit">Place order</button>
    </form>
  );
}

Browser Result

Follow the Submitted Data

get("delivery")       → "courier"
getAll("extras")      → ["extra-cheese", "olives"]
get("deliveryTime")   → "18-00"

This example collects the choices. A later backend request would check availability, calculate the price, and create the order.

Several Radio Buttons Stay Selected

Make sure every radio button in the group has the same name.

Only One Checkbox Value Appears

Use getAll("extras"), not get("extras").

Checkbox Submits on

Add a meaningful value:

value="extra-cheese"

Empty Select Is Accepted

Add required to the select and disabled to the empty option.

FormData Cannot Find the Control

Check the control's name. FormData does not read values by id.

Wrong Value Appears

Check the value attribute. The visible label or option text may be different from the submitted value.

Final Comparison

Important Properties

Practice

1. Create three radio buttons for small, medium, and large pizza sizes.
2. Give them the same name and different values.
3. Make medium selected initially.
4. Create checkboxes for three pizza extras.
5. Read the extras with getAll().
6. Create a required select for a delivery time.
7. Connect its label with useId().
8. Combine the three controls and log their values.

Three Rules to Remember

Radio buttons: same name, one selected value
Checkboxes: getAll returns all selected values
Select: visible text and submitted value may differ

Next lesson: Wait for the next source topic before adding more Module 3 material.