HTML - CheckBox


Checkbox is a type of input element that will add its name and value to the form data only if checked (making it a succesful control)

The HTML checkbox form control can only have two checked states (via its checked attribute):

  • checked (checked=true)
  • or not checked (checked=false)

If you want to get always a value for a property (ie false or true), you can:

Base Demo

This demo shows that if the checkbox is checked, the property given by the name attribute (with value property-name) will be added to the data send by the form with the default value of on

  • The HTML: A checkbox with the mandatory name (property-name)
    <input type="checkbox" name="property-name"  />
    <button type="submit">Submit</button>
  • Test it:
    • Uncheck and submit
    • Check and submit


The syntax of a checkbox is:

<input type="checkbox" name="propertyName" value="propertyValue" checked="false|true"/>



If a checkbox is unchecked when its form is submitted, the field data is just not sent.

There is no not-checked value


The default value is on and never changes.


  • The HTML
<input type="checkbox"  name="indicator"/>
document.querySelector("input").addEventListener("click", function(){
   console.log(`The checkbox is checked ? ${this.checked}`);
   console.log(`The value is ${this.value}`);
  • Checking or unchecking the checkbox does not change the value

If Set

If the value attribute is set, this value will be send instead


  • The HTML with a checkbox with a mandatory name and a custom value
    <input type="checkbox" name="indicator" value="customValue" />
    <button type="submit">Submit</button>
  • This javascript:
    • will intercept the submit event,
    • create a formdata to capture the fields send.
    • and logs the entries.
document.querySelector("form").addEventListener("submit", function(event){
   let formData =  new FormData(this);
   let i = 0;
   for (let entry of formData) {
      console.log(`Entry ${i}`);
   console.log(`Number of field sent: ${i}`);
  • The result:
    • Uncheck and submit
    • Check and submit

Visual / Styling


  • To style the below checkbox:
<input type="checkbox"  name="indicator" checked/>
  • first disable the browser rendering
input[type="checkbox"] {
  appearance: none;
  • Then make you own.
  • Styling for Checked or unchecked checkbox
input[type="checkbox"] {
  width: 2rem;
  height: 2rem;
  border-radius: .5em;
  border: 1px solid rgba(0,0,0,.25);
  background-color: #20c997;
  border-color: #20c997;
input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3e%3c/svg%3e");
  • Output:


As switch 1)

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>


With button 2)

<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>

Keyboard Navigation

You may navigate with the tab key because a input (and alos checkbox) is by default focusable. You still may change the order of navigation via the tabindex value.


  • if you click on the first check below
  • the first tab will get you on the last one because of the tabindex of value 2
  • the second tab will get you on the second checkbox because of the tabindex of value 0
  • the third tab will get you on the next interactive element in the iframe (ie a link) - the code is rendered in a iframe
<input type="checkbox"  tabindex="1" />
<input type="checkbox" tabindex="0" />
<input type="checkbox" tabindex="2" />

How to

How to change the state programmatically

The checked attribute of the input checkbox element permits:

  • to test the state (if true, the checkbox is checked)
  • to set the state


function toggleCheckBox(event){
  if ({ = false; "Check the checkbox";
  } else { = true; "Uncheck the checkbox";
<form onSubmit="toggleCheckBox(event)">
<input type="checkbox" name="checkbox" checked="true" /></br>
<button type="submit" name="button">Uncheck the checkbox</button>
  • Result:

How to use a checkbox to enable or disable other Form elements

Example of a legend with a checkbox that controls whether or not the fieldset is enabled

<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  Use Club Card
 </label> </legend>
 <p><label>Name on card: <input name=clubname required></label></p>
 <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
 <p><label>Expiry date: <input name=clubexp type=month></label></p>
  • Just click the checkbox to see it in action.

Aria Role

With aria role, you need to handle programmatically the state of each attribute as seen in this example 3)

The code:

  • The Css
    content: '\00a0\00a0';
    width: 14px;
    height: 14px;
    border: 1px solid hsl(0, 0%, 66%);
    border-radius: 0.2em;
    background-image: linear-gradient(to bottom, hsl(300, 3%, 93%), #fff 30%);

   content: url('/_media/web/html/checkbox_checked.png');

[role='checkbox'].focus {
   border-color: black;
   background-color: #EEEEEE;
  • The Javascript:
window.onload=function() { 
    var checkboxes = document.querySelectorAll('[role="checkbox"]'); 
    for (var i = 0; i < checkboxes.length; i++) { 
         var cb = new Checkbox(checkboxes[i]); cb.init(); 
  • The HTML (tabindex makes the div focusable (ie clickable)
<div id="ex1">
    Sandwich Condiments
    <div role="checkbox"
    <div role="checkbox"
    <div role="checkbox"
    <div role="checkbox"

<!-- With the libray call at the end -->
<!-- Checkbox widget that implements ARIA Authoring Practices for a menu of links -->
<script src="" type="application/javascript"></script>

Documentation / Reference

Powered by ComboStrap