HTML <input> type="checkbox"

The <input> tag with a type="checkbox" attribute creates a checkbox (also called a tickbox). Checkboxes let users select multiple options by ticking one or more boxes.

Example

#

Four <input> elements of type checkbox.
The first checkbox is checked (selected).

Your favorite technologies



<form action="/tutorial/action.html">
 <fieldset>
   <legend>Your favorite technologies</legend>

   <label><input type="checkbox" name="html" value="html" checked> HTML</label><br />
   <label><input type="checkbox" name="css" value="css"> CSS</label><br />
   <label><input type="checkbox" name="javascript" value="javascript"> Javascript</label><br />
   <label><input type="checkbox" name="csharp" value="csharp"> C#</label><br />

   <input type="submit" value="Submit">
  </fieldset>
</form>

Code explanation

All input elements are contained by a <form> and a <fieldset> with a <legend>.

Each checkbox is associated with a <label> which is wrapped around the checkbox.

Clicking the box or the label will select or unselect the checkbox

The first checkbox is selected by default with the checked attribute.

Submitting the form will send the values of selected checkboxes only.


Using input type="checkbox"

An <input> tag with type="checkbox"creates a checkbox element.

A checkbox allows a user to select an option by ticking a box.

Each checkbox is usually associated with a <label> (see below).


Syntax

<input type="checkbox">

Associating a label to a checkbox

Adding clickable labels to checkboxes improves usability. It allows users to click the labels to turn checkboxes on and off. There are 2 ways to implement this:

  1. Wrap a <label> around the <input> element (checkbox), or
  2. Bind a <label> to the <input> element (checkbox) using a for attribute.

Wrapped label

A <label> wrapping a checkbox.

<form>
  <label><input type="checkbox" name="insured" value="insured" checked> &nbsp;Do you have insurance?</label>
</form>

Bound label

A <label> associated with a checkbox using a for attribute.

<form>
  <input type="checkbox" id="insured" name="insured" value="insured" checked>
  <label for="insured"> &nbsp;Do you have insurance?</label>
</form>

Tip:  The wrapped label approach is preferred because it is simpler and does not require for and id attributes.


Browser support

Here is when type="checkbox" support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

 Back to <input>
Guides