<input type="checkbox">

Checkbox <input> elements appear by default as boxes that are checked (checked) when activated, as you might see on an official government paper form. Exactly what this looks like depends on the operating system configuration your browser is running on. Generally this is a square but may have rounded corners. A checkbox allows you to select individual values to submit on a form (or not).

Note: Radio buttons are similar to checkboxes, but with one important distinction: radio buttons are grouped together in a set where only one radio button can be selected at a time, while checkboxes allow you to activate and disable individual values. Where there are multiple controls, radio buttons allow you to select one among all, while check boxes allow you to select multiple values.

Value

A string representing the checkbox value. This is not displayed on the client side, but on the server value is given to the data sent with the name checkbox. Take the following example:

<form>
  <div>
    <input type="checkbox"subscribeNews" name="subscribe"
    value="newsletter">
    <label for="subscribeNews">Vuoi iscriverti alla newsletter?</label>
  </div>
  <div>
    <button type="submit">Iscriviti</button>
  </div>
</form>

In this example, we have a name of subscribe and a value of newsletter. When the form is submitted, the data name/value pair will be subscribe=newsletter.

If the value attribute was omitted, the default value for the checkbox is on, so the data sent in that case would be subscribe=on.

Additional attributes

In addition to the common attributes shared by all <input> elements, "checkbox" inputs support the following attributes.

checked

A Boolean attribute indicating whether or not this checkbox is selected by default (on page load). Does not indicate whether this checkbox is currently selected: If the checkbox's state changes, this content attribute does not reflect the change.

value

The value attribute is shared by all <input>; however, it has a special purpose for checkbox type input: when a form is submitted, only the currently selected checkboxes are sent to the server, and the value reported is the value of the value attribute. If value is not otherwise specified, on is the string by default.

Validation

Checkboxes support validation (offered to all <input>). However, most of the ValidityStates will always be false. If the checkbox has the required attribute, but is not selected, ValidityState.valueMissing will be true.