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.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

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

<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.

.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

Text

A label can’t have more than one input, and it can omit the for attribute and will be supposed to be for the input within it.

The for attribute must match the value of the id 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 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>