Checkboxes & Radio Buttons: type="checkbox" and type="radio"

Not all user input is text. Sometimes you want the user to choose from a fixed set of options. HTML provides two input types for this: checkboxes (pick any number) and radio buttons (pick exactly one).

Checkboxes — multiple selections

type="checkbox" creates a box the user can check or uncheck. Multiple checkboxes can be checked at the same time.

<input type="checkbox" id="gear-boots" name="gear" value="boots">
<label for="gear-boots">Hiking boots</label>

<input type="checkbox" id="gear-pack" name="gear" value="pack">
<label for="gear-pack">Backpack</label>

<input type="checkbox" id="gear-map" name="gear" value="map">
<label for="gear-map">Trail map</label>

Notice that the <label> comes after the checkbox here — that is the standard pattern for checkboxes and radio buttons. The label text appears to the right of the control.

The value attribute is what gets submitted with the form when the checkbox is checked. If unchecked, nothing is submitted for that field.

Radio buttons — single selection

type="radio" creates a button that selects one option from a group. Clicking a new radio button in the same group deselects the previous one.

The grouping rule: Radio buttons that belong to the same group must share the same name attribute. That is how the browser knows they are mutually exclusive.

<input type="radio" id="level-easy" name="difficulty" value="easy">
<label for="level-easy">Easy</label>

<input type="radio" id="level-moderate" name="difficulty" value="moderate">
<label for="level-moderate">Moderate</label>

<input type="radio" id="level-strenuous" name="difficulty" value="strenuous">
<label for="level-strenuous">Strenuous</label>

All three share name="difficulty". Selecting “Moderate” deselects “Easy”. Only one value is submitted.

If radio buttons have different name values, they form separate groups — and the user can select one from each group independently.

Labels for checkboxes and radio buttons

Each individual checkbox and radio button needs its own <label>. The for attribute on the label must match the id on the input — the same pattern you learned in Lesson 02.

<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to updates</label>

Inside the form

Checkboxes and radio buttons belong inside <form> like any other input:

<form>
  <p>What gear do you have?</p>
  <input type="checkbox" id="gear-boots" name="gear" value="boots">
  <label for="gear-boots">Hiking boots</label>

  <input type="checkbox" id="gear-pack" name="gear" value="pack">
  <label for="gear-pack">Backpack</label>

  <p>Preferred trail difficulty:</p>
  <input type="radio" id="level-easy" name="difficulty" value="easy">
  <label for="level-easy">Easy</label>

  <input type="radio" id="level-moderate" name="difficulty" value="moderate">
  <label for="level-moderate">Moderate</label>
</form>

Exercise

Open index.html in VS Code.

Find the <form> in your Contact section. Add a group of checkboxes or radio buttons relevant to your page topic, placed before the <button>.

Option A — checkboxes (use when any number can apply):

<p>What are you interested in?</p>
<input type="checkbox" id="interest-tips" name="interest" value="tips">
<label for="interest-tips">Tips and advice</label>

<input type="checkbox" id="interest-gear" name="interest" value="gear">
<label for="interest-gear">Gear recommendations</label>

<input type="checkbox" id="interest-trails" name="interest" value="trails">
<label for="interest-trails">Trail suggestions</label>

Option B — radio buttons (use when exactly one should apply):

<p>How did you find this site?</p>
<input type="radio" id="source-search" name="source" value="search">
<label for="source-search">Search engine</label>

<input type="radio" id="source-friend" name="source" value="friend">
<label for="source-friend">A friend</label>

<input type="radio" id="source-other" name="source" value="other">
<label for="source-other">Other</label>

Choose the type that fits your content, or add both.

Save and open index.html in your browser. For radio buttons, confirm that selecting one option deselects the others in the same group.

Recap

• type="checkbox" — user can check any number of options.
• type="radio" — user can select only one option per group.
• Radio buttons are grouped by sharing the same name attribute. Without matching name values, they do not behave as a group.
• Each checkbox and radio button needs its own <label> associated with for/id.
• The value attribute holds the data that gets submitted when an option is selected.