# Checkboxes, Radio Buttons and Fieldsets

Radio buttons let a visitor pick exactly one choice and checkboxes any number, and a fieldset with a legend groups them so everyone, screen-reader users too, knows what each choice answers.

Apprentice · HTML · Updated October 31, 2026

## After this lesson you can

- Build a group of radio buttons with one shared name, and a value and a label for each choice
- Offer any number of choices with checkboxes, and set a default with checked
- Group related choices in a fieldset with a legend

## Key takeaways

- Radio buttons are for one choice from a few. Giving them the same name makes them one group, so picking one unpicks the others.
- Each choice needs its own value, which is what the browser sends, and its own label, which is what the visitor reads and clicks.
- Checkboxes are for any number of choices. Only the checked ones are sent; an unchecked box sends nothing at all.
- The checked attribute picks a choice before the visitor does, such as the size most people order.
- A fieldset groups related choices, and its legend is their question, so a screen reader says "Size, group" before the choices.

Order a pizza online and you answer two kinds of question without thinking about it. *What size?* has one answer: you can't have a pizza that's both small and large. *Which toppings?* has as many answers as you like, or none. Surveys, sign-up forms, shipping options and settings pages are full of both kinds.

HTML has a control for each: **radio buttons** for one answer, and **checkboxes** for any number. In this lesson you'll build both for Slice of Heaven Pizza's order form, and group them so every visitor, including people who hear the page instead of seeing it, knows which question each choice answers.

## Radio buttons: press one, the other pops up

Old car radios had a row of chunky buttons, one per station. Press one in and the button that was in pops back out, so only one station plays at a time. The **radio button** is named after them: a row of round buttons where picking one unpicks the rest.

A radio button is an `<input>` with `type="radio"`. What makes a row of them work together is the **`name`**: every button with the same name belongs to one group.

```html
<input type="radio" id="size_small" name="size" value="small">
<label for="size_small">Small, 10 inches</label>

<input type="radio" id="size_medium" name="size" value="medium">
<label for="size_medium">Medium, 12 inches</label>

<input type="radio" id="size_large" name="size" value="large">
<label for="size_large">Large, 14 inches</label>
```

Give two of them different names by mistake, and the browser treats them as two separate questions: the visitor can pick Small *and* Large.

## A value and a label for every choice

Each radio button has two kinds of words, for two different readers:

- **The `value`** is for the kitchen. It's what the browser sends: pick Large and the form sends `size=large`. Without a `value`, the browser sends `size=on`, which tells the kitchen nothing.
- **The `<label>`** is for the visitor. It's what they read, and clicking it picks the button. That's a much bigger target than a small circle, which matters on a phone.

Every choice needs its own label, tied to its own button with `for` and `id`, as in *Text Inputs and Labels*. Each `id` is used once on a page, so the three buttons get three ids, while they share one `name`.

You can also put the button inside its label, and then `for` and `id` aren't needed:

```html
<label><input type="radio" name="size" value="large"> Large, 14 inches</label>
```

With the keyboard, **Tab** moves into the group and the **arrow keys** move between its choices. Try it on any form: it's how people who don't use a mouse fill one in.

**Try it.** Make a file named `choices.html` with the page skeleton and a `<form>` that has no `action`, holding the three size buttons and a `<button>Order</button>`. Open it with Live Server, pick Medium, and send it. The address bar ends with `?size=medium`. Now delete one button's `value` and send again.

## Checkboxes: as many as you like

A **checkbox** is a square box you tick, and each one is on or off on its own. Use checkboxes when a visitor can pick any number of answers, including none.

```html
<input type="checkbox" id="top_pepperoni" name="topping" value="pepperoni">
<label for="top_pepperoni">Pepperoni</label>

<input type="checkbox" id="top_mushrooms" name="topping" value="mushrooms" checked>
<label for="top_mushrooms">Mushrooms</label>

<input type="checkbox" id="top_basil" name="topping" value="basil">
<label for="top_basil">Fresh basil</label>
```

- **Only the checked boxes are sent.** Tick pepperoni and basil, and the form sends `topping=pepperoni&topping=basil`: the same name twice, one pair per box. An unchecked box sends nothing at all, not even "off".
- **`checked`** ticks a box before the visitor does: here, mushrooms are on unless the visitor unticks them. It's an attribute with no value: writing it turns it on, and leaving it out turns it off. An attribute that works like a light switch is called a **boolean attribute** (say "BOO-lee-un", after George Boole, who worked out the math of true and false).

`checked` works on radio buttons too. Putting it on Medium, the size most people order, means the form never arrives with no size.

One checkbox on its own is the right control for a yes-or-no question, such as *Add a two-liter soda?* or *I agree to the terms*.

## Fieldsets and legends: one question, many choices

Each label says what its choice is, but not what the question was. "Large" could be the pizza size or the size of a soda. On paper, a box drawn around the choices with a heading does that job. In HTML it's a **`<fieldset>`**, and its heading is a **`<legend>`**:

```html
<fieldset>
  <legend>Size</legend>
  <input type="radio" id="size_small" name="size" value="small">
  <label for="size_small">Small, 10 inches</label>
  <input type="radio" id="size_medium" name="size" value="medium" checked>
  <label for="size_medium">Medium, 12 inches</label>
  <input type="radio" id="size_large" name="size" value="large">
  <label for="size_large">Large, 14 inches</label>
</fieldset>
```

- **The legend comes first**, as the fieldset's first child, and holds the question in a few words.
- Browsers draw a line around the fieldset, with the legend set into its top edge.

The biggest difference is one you hear. A **screen reader** is software that reads the page aloud, for people who can't see the screen. When its user reaches the first choice, it says something like *"Size, group. Small, 10 inches, radio button, 1 of 3."* Without the fieldset, they'd hear "Small, 10 inches" with no idea what's being asked.

![The Slice of Heaven order form with two boxes drawn around its choices: one with the legend Size around three radio buttons, and one with the legend Toppings around six checkboxes](https://www.ask-codey.com/lessons/TODO)

**Try it.** Wrap your size buttons in a fieldset with the legend `Size`, and the toppings in another with the legend `Toppings`. On Windows, turn on Narrator with **Ctrl + Windows key + Enter**; on a Mac, VoiceOver with **Command + F5**. Tab into the form and listen, then turn it off with the same keys.

## Check yourself

2 questions to try on the lesson page.

## So what

Radio buttons for one answer, checkboxes for many, and a fieldset that says what they answer: three small habits that make a form work for every visitor, on any screen, and in any way they use the web.

## Key terms

- [Radio button](https://www.ask-codey.com/glossary/radio-button)
- [Checkbox](https://www.ask-codey.com/glossary/checkbox)
- [checked](https://www.ask-codey.com/glossary/checked)
- [&lt;fieldset>](https://www.ask-codey.com/glossary/fieldset)
- [&lt;legend>](https://www.ask-codey.com/glossary/legend)

## Cheat sheets

- [Checkboxes, Radio Buttons and Fieldsets](https://www.ask-codey.com/cheat-sheets/html-forms-checkboxes-radios-and-fieldsets-cheat-sheet)

## Related

- [Input Types for Email, Numbers, Dates and More](https://www.ask-codey.com/lessons/html-forms-input-types)
- [Dropdowns, Text Areas and Suggestions](https://www.ask-codey.com/lessons/html-forms-select-textarea-and-datalist)
- [Text Inputs and Labels](https://www.ask-codey.com/lessons/html-forms-text-inputs-and-labels)

Source: https://www.ask-codey.com/lessons/html-forms-checkboxes-radios-and-fieldsets