How to create a checkbox with a clickable label?

Question

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)?

Cathryncathy

Answer 1

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>

Nantucket

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 – Wicklow

Thanks for this, I took a bigger step and created a checkbutton, without showing the checkbox itself. I just wonder if there's a way to only use CSS... – Sponge

@Wesley. getbootstrap.com/css/#forms - don't wrap inputs with <label> if makes things harder for mobile responsiveness – Wicklow

@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. – Nantucket

The "for" method doesn't work if the label and input are in separate TD's of a table. Perhaps they have to be the same parent element - I didn't experiment but that would be reasonable – Seldan

@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. – Westwardly

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

How can the label "be positioned before or after the associated control" if it wraps the control? @WesleyMurch – Eveliaevelin

@Eveliaevelin referring to the label text itself. – Nantucket

Defining the cursor type on hover is quite redundant. The cursor value is always defined when hovering. – Selachian

In what cases could the second version you mentioned NOT work? I had it with "for" etc. but it did not work. The first one did however. – Laquanda

@WesleyMurch: Method 1 seems not to work any more. – Nanette

Answer 2

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>

Hak

I'm confused by the fact that you gave the two checkboxes the same name, and different values. Is that on purpose? – Anonymous

@Anonymous — Yes, that is how you create checkbox groups. – Hak

Thanks. I was looking at w3.org/wiki/HTML/Elements/input/checkbox and it wasn't helpful in that regard. – Anonymous

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? – Compote

@JeromeJ — Yes, PHP is weird (and pretty close to unique) like that. There is no mention of PHP being used in the question or this answer though so it doesn't matter. – Hak

@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). – Gerena

Answer 3

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

Propene

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 – Propene

Downvoted. While it's possible, it's a bad way - doesn't work on many browsers, not good for accessibility. – Musgrave

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> – Serenaserenade

The "it works on Webkit/Blink" smells like a bug using ( #2588169 ) so it may stop working at anytime. – Lavalava

Answer 4

<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />

Feeler

Answer 5

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>

Bracteole

Answer 6

<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

Bordello

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). – Faller

Answer 7

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>

Waxy

Answer 8

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>

Trillby

You may ommit the for and id attributes in your example, since the label tag only has one input element inside it. – Faller

Answer 9

<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />

Wastebasket

Answer 10

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" />

Wickliffe

Answer 11

In Angular material label with checkbox

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

Derrick

Answer 12

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');
    });
});

Medici

Not necessary to use JavaScript to do this. It's built into HTML. – Schuman

@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. – Cathryncathy