splitforms.com
Get free key
HTML · FORM CONTROL

HTML Checkbox — toggle and multi-select (live demo)

A checkbox is an <input type="checkbox"> that lets a user turn a single option on or off, or pick several options from a group (each with its own name). When checked, its value is submitted; when unchecked, nothing is sent for it at all. Below is a working form with checkboxes.

Updated June 2026 · The <input type="checkbox"> element · 12 elements in the reference

Get free access key Try the live demo
preview · html checkboxsandboxed · no key
§ 01Copy-paste codeworking · submits to a free backend
checkbox.html
<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <fieldset>
    <legend>I'm interested in (tick all that apply)</legend>
    <label><input type="checkbox" name="interest" value="newsletter"> Newsletter</label>
    <label><input type="checkbox" name="interest" value="beta"> Beta access</label>
    <label><input type="checkbox" name="interest" value="demo"> Product demo</label>
  </fieldset>

  <label><input type="checkbox" name="agree_terms" value="yes" required> I agree to the terms</label>

  <button type="submit">Send</button>
</form>

Replace YOUR_ACCESS_KEY with a key from your free splitforms dashboard. The form posts to one endpoint — submissions land in your inbox and dashboard with spam filtering built in.

§ 02<input type="checkbox"> attributes
AttributeWhat it does
nameThe key the value is submitted under. Checkboxes in a multi-select group can share a name to submit an array.
valueWhat's sent when the box is checked. Without it, the browser submits the literal "on".
checkedBoolean. Pre-checks the box when the page loads.
requiredBoolean. Forces the box to be checked before the form can submit (useful for "I agree" consent).
disabledGreys out the box and excludes it from submission.
§ 03Common mistakes
⚠ gotcha

Unchecked = not submitted

If a checkbox is unchecked, its name is absent from the submission entirely — not sent as false. Detect this server-side as "key missing".

⚠ gotcha

Without value, you get "on"

A checked checkbox with no value= submits the string "on". Always set a meaningful value so you can tell states apart.

⚠ gotcha

Checkbox vs radio

Checkboxes are independent (tick any number); radios in a group are mutually exclusive (pick one). Use radios when exactly one choice is allowed.

§ 04Questions
How do I create a checkbox in HTML?
Use <input type="checkbox" name="agree" value="yes">, wrapped in a <label> so the text is clickable. Add checked to pre-tick it, and required to force it on (common for consent).
What value does a checkbox submit?
When checked, it submits its value= attribute. If value= is missing it submits "on". When unchecked, nothing is submitted for that name at all.
How do I let users select multiple options?
Give each checkbox the same name (e.g. name="interest") and a different value. The form then submits multiple values under that name — an array on the server side.
How do I pre-check a checkbox?
Add the checked attribute: <input type="checkbox" name="news" value="yes" checked>. It will be ticked when the page loads.
Why doesn't my unchecked checkbox submit anything?
By design — an unchecked checkbox is not included in the form data. Treat the absence of the key as the unchecked state in your backend, rather than expecting a false value.

Make this form actually submit.

Point your form at splitforms. 500 free submissions/month, spam filtering, webhooks — no server.

Get free access key →All HTML elements