How to Create a Checkbox in HTML

Use a checkbox when users need to turn an option on or off or choose one or more items from a list. Checkboxes work best for preferences, consent fields, feature selections, and multi-select forms.

What you’ll build or solve

You’ll learn how to create a checkbox in HTML with the correct <input> type and label. You’ll also know how to group multiple checkboxes in a clean, readable way.

When this approach works best

This approach is the right choice when users can select zero, one, or multiple options.

Common real-world scenarios include:

• Newsletter preferences
• Terms and conditions consent
• Product feature filters
• Skills checklists
• Multi-select survey answers

This is a bad idea when users must choose only one option. In that case, use radio buttons instead.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Add a checkbox input with a matching label

Use <input type="checkbox"> and pair it with a <label>.

<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Subscribe to the newsletter</label>

For multiple selectable choices, repeat the same structure with unique id values.

<input type="checkbox" id="html" name="skills" value="html">
<label for="html">HTML</label>

<input type="checkbox" id="css" name="skills" value="css">
<label for="css">CSS</label>

<input type="checkbox" id="javascript" name="skills" value="javascript">
<label for="javascript">JavaScript</label>

What to look for:

• Use type="checkbox" for on/off or multi-select choices
• Match each label for value to the checkbox id
• Use the same name for related multi-select options
• Add a value for each choice in forms
• Use radio buttons if only one option should be selected

Examples you can copy

Newsletter consent

<input type="checkbox" id="marketing" name="marketing">
<label for="marketing">Send me product updates</label>

Skill selection

<input type="checkbox" id="python" name="skills" value="python">
<label for="python">Python</label>

<input type="checkbox" id="sql" name="skills" value="sql">
<label for="sql">SQL</label>

Terms agreement

<input type="checkbox" id="terms" name="terms">
<label for="terms">I agree to the terms and conditions</label>

Common mistakes and how to fix them

Mistake 1: Missing label connection

What the reader might do:

<input type="checkbox" id="terms">
<label>I agree</label>

Why it breaks: clicking the label may not toggle the checkbox, and accessibility suffers.

Corrected approach:

<input type="checkbox" id="terms">
<label for="terms">I agree</label>

Mistake 2: Using different name values for one checkbox group

What the reader might do:

<input type="checkbox" id="usa" name="country">
<label for="usa">USA</label>

<input type="checkbox" id="uk" name="region">
<label for="uk">UK</label>

Why it breaks: related multi-select values become harder to process together in forms.

Corrected approach:

<input type="checkbox" id="usa" name="countries" value="usa">
<label for="usa">USA</label>

<input type="checkbox" id="uk" name="countries" value="uk">
<label for="uk">UK</label>

Mistake 3: Using a checkbox for single-choice questions

What the reader might do:

<input type="checkbox" id="plan-basic" name="plan">
<label for="plan-basic">Basic</label>

<input type="checkbox" id="plan-pro" name="plan">
<label for="plan-pro">Pro</label>

Why it breaks: users can select both, even if the form expects only one choice.

Corrected approach:

<input type="radio" id="plan-basic" name="plan" value="basic">
<label for="plan-basic">Basic</label>

<input type="radio" id="plan-pro" name="plan" value="pro">
<label for="plan-pro">Pro</label>

Troubleshooting

If clicking the label does not toggle the checkbox, match the label for value to the checkbox id.

If related values arrive separately in the form, use the same name for the checkbox group.

If users can select too many choices, switch to radio buttons for single-choice input.

If the checkbox meaning feels unclear, rewrite the label as a clear action or preference.

Quick recap

• Use type="checkbox" for on/off and multi-select choices
• Pair every checkbox with a matching label
• Use the same name for related groups
• Add a value for each choice
• Use radio buttons when only one option is allowed