1169

How can I create an HTML checkbox with a label that is clickable (this means that clicking on the label turns the checkbox on/off)?

1

12 Answers 12

2176

Method 1: Wrap Label Tag

Wrap the checkbox within a label tag:

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

Method 2: Use the for Attribute

Use the for attribute (match the checkbox id):

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

NOTE: ID must be unique on the page!

Explanation

Since the other answers don't mention it, a label can include up to 1 input and omit the for attribute, and it will be assumed that it is for the input within it.

Excerpt from w3.org (with my emphasis):

[The for attribute] explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

Using this method has some advantages over for:

  • No need to assign an id to every checkbox (great!).

  • No need to use the extra attribute in the <label>.

  • The input's clickable area is also the label's clickable area, so there aren't two separate places to click that can control the checkbox - only one, no matter how far apart the <input> and actual label text are, and no matter what kind of CSS you apply to it.

Demo with some CSS:

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}
<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>

13
  • 15
    Love it, but please edit again. This is only good for checkboxes. Let's not encourage folks to wrap their other inputs with labels, because that breaks the grid system and mobile responsiveness will be harder to come by
    – Max
    Nov 6, 2014 at 7:59
  • 1
    @Wesley. getbootstrap.com/css/#forms - don't wrap inputs with <label> if makes things harder for mobile responsiveness
    – Max
    Jul 31, 2015 at 14:29
  • 17
    @John that is a markup guide specifically for bootstrap. If you aren't using a framework, or are using a different one, it should be completely fine. Thanks for the reply. Jul 31, 2015 at 18:23
  • 4
    @John. On the page you link, bootstrap examples all wrap checkbox with label, I don not see any warnings as you indicate at all, perhaps its no longer relevant to the latest bootstrap. Aug 12, 2016 at 16:06
  • 3
    As I learned today, don't mix Method 1 and Method 2. If you wrap the checkbox in a label AND include the for, then clicking on the label won't trigger the checkbox.
    – BBlake
    Dec 8, 2016 at 16:05
57

Just make sure the label is associated with the input.

<fieldset>
  <legend>What metasyntactic variables do you like?</legend>

  <input type="checkbox" name="foo" value="bar" id="foo_bar">
  <label for="foo_bar">Bar</label>

  <input type="checkbox" name="foo" value="baz" id="foo_baz">
  <label for="foo_baz">Baz</label>
</fieldset>
6
  • 1
    I'm confused by the fact that you gave the two checkboxes the same name, and different values. Is that on purpose?
    – LarsH
    Aug 22, 2013 at 14:39
  • 2
    @LarsH — Yes, that is how you create checkbox groups.
    – Quentin
    Aug 22, 2013 at 14:40
  • Thanks. I was looking at w3.org/wiki/HTML/Elements/input/checkbox and it wasn't helpful in that regard.
    – LarsH
    Aug 22, 2013 at 14:42
  • 2
    With PHP, wont that make $_POST['foo'] always have one of the two values maximum at one time? Even if both checked. What's a checkbox group?
    – jeromej
    Jun 9, 2014 at 9:27
  • 2
    @JeromeJ: For php to handle it correctly, you have to add square brackets to the name, e.g: <input type="checkbox" name="foo[]" value="bar" ...>. This will give you an array which contains the values of all the checked boxes (that have this name). For example $_POST['foo'][0] might be bar and $_POST['foo'][1] might be baz (if both are checked).
    – Levite
    Mar 18, 2015 at 9:32
15

You could also use CSS pseudo elements to pick and display your labels from all your checkbox's value attributes (respectively).
Edit: This will only work with webkit and blink based browsers (Chrome(ium), Safari, Opera....) and thus most mobile browsers. No Firefox or IE support here.
This may only be useful when embedding webkit/blink onto your apps.

All pseudo element labels will be clickable.

[type=checkbox]:after {
  content: attr(value);
  margin: -3px 15px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-block;
}
<input type="checkbox" value="My checkbox label value" />

Demo:http://codepen.io/mrmoje/pen/oteLl, + The gist of it

4
  • True. Gecko and Trident and gecko do not seem to like this. This will work with Webkit and Blink only. I'll update the answer
    – mrmoje
    Sep 24, 2014 at 3:14
  • 7
    Downvoted. While it's possible, it's a bad way - doesn't work on many browsers, not good for accessibility. Feb 20, 2015 at 20:01
  • Compatibility issues aside, this solution isn't as semantic as the top answer because there is no direct association in markup between the <label> and the <input>
    – deadboy
    May 20, 2015 at 16:25
  • The "it works on Webkit/Blink" smells like a bug using ( stackoverflow.com/questions/2587669/… ) so it may stop working at anytime.
    – Xenos
    Sep 21, 2016 at 9:44
8
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
4

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}
<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>

3
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
1
  • 1
    Since it may be confusing to some readers, you should change the name attribute's value to something different than the value that is present in the for and id attributes, since these two are related, whereas name is not (it is stil mandatory to be included I believe though).
    – Dzhuneyt
    Apr 2, 2013 at 14:42
2

This should help you: W3Schools - Labels

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>
2

It works too :

<form>
    <label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
    <label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>
1
  • 2
    You may ommit the for and id attributes in your example, since the label tag only has one input element inside it.
    – Dzhuneyt
    Apr 2, 2013 at 14:41
1
<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />
0

Use the label element, and the for attribute to associate it with the checkbox:

<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />

-3

In Angular material label with checkbox

<mat-checkbox>Check me!</mat-checkbox>
-8

Use this

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id" id="checkbox_lbl">Text</label>


$("#checkbox_lbl").click(function(){ 
    if($("#checkbox_id").is(':checked'))
        $("#checkbox_id").removAttr('checked');
    else
       $("#checkbox_id").attr('checked');
    });
});
2
  • 10
    Not necessary to use JavaScript to do this. It's built into HTML.
    – Lasse Bunk
    May 2, 2015 at 15:45
  • 4
    @LasseBunk, if only it was just JavaScript, but the whole jQuery library is required for this to work. Let's see if someone can come up with an Angular 2 solution.
    – laurent
    Jan 2, 2017 at 15:21

Not the answer you're looking for? Browse other questions tagged or ask your own question.