How to Create Checkbox with a Clickable Label

It is possible to create a checkbox with a clickable label. This means that the checkbox gets on/off when clicking the label.

In this snippet, we suggest two methods of creating a checkbox with a clickable label. This is possible to do either by wrapping a <label> tag, or by using a “for” attribute.

First, let’s see how to use the method of wrapping the <label> tag.

Create HTML

Use a <label> tag with the class named “label”.
Add an <input> element with the <span class="attribute">type</span>, <span class="attribute">name</span>, and <span class="attribute">value</span> attributes within the <label> tag.

How to Create a Checkbox with a Clickable Label

<label class="label"> 
  <input type="checkbox" name="checkbox" value="text" /> Text
</label>

Now, style the label with CSS.

Add CSS

Use the background-color, border, and color properties.
Add padding and margin.
Set the text-align to “center” and the display to “inline-block”.
Specify the font-size and cursor properties.

How to Create a Checkbox with a Clickable Label

.label {
  background-color: #fff;
  border: 1px solid #666;
  color: #000;
  padding: 10px 15px;
  text-align: center;
  display: inline-block;
  font-size: 20px;
  margin: 15px 15px;
  cursor: pointer;
}

Let’s see the final code.

Example of creating a checkbox with a clickable label by wrapping the `<label>` tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .label {
        background-color: #fff;
        border: 1px solid #666;
        color: #000;
        padding: 10px 15px;
        text-align: center;
        display: inline-block;
        font-size: 20px;
        margin: 15px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <label class="label">
      <input type="checkbox" name="checkbox" value="text" />Text
    </label>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose"> <label class="label"> <input name="checkbox" type="checkbox" value="text">``</input>Text </label> </div>A label can’t have more than one input, and it can omit the <span class="attribute">for</span> attribute and will be supposed to be for the input within it.

The <span class="attribute">for</span> attribute must match the value of the <span class="attribute">id</span> attribute. When absent, the label is associated with the element’s content. Also, note that the id should be unique on the page.

Example of creating a checkbox with a clickable label using the `<span class="attribute">`for`</span>` attribute:

Example of creating a checkbox with a clickable label using the “for” attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        background-color: #fff;
        border: 1px solid #666;
        color: #000;
        padding: 10px 15px;
        text-align: center;
        display: inline-block;
        font-size: 15px;
        margin: 15px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <input type="checkbox" name="checkbox" id="checkID" value="text" />
    <label class="text" for="checkID">Text </label>
  </body>
</html>

Try it Yourself »

The first method that we demonstrated above has some advantages over using the <span class="attribute">for</span> attribute. It is better as there isn’t any need to assign an id to every checkbox or to use an additional attribute within the <label>. One more advantage is that the clickable area of the label is also the label’s clickable area.