Checkboxes won't render without label, and label needs to be in the right place

[JulianKingman]

I've noticed that checkboxes only appear if they are coded like this:
<input type="checkbox" id="checkboxid"><label for="checkboxid">Yes?</label>

These do not work:
<input type="checkbox" id="checkboxid">
<label for="checkboxid">Yes?</label><input type="checkbox" id="checkboxid">
<label>Yes?<input type="checkbox" id="checkboxid"></label>
<label><input type="checkbox" id="checkboxid">Yes?</label>

Thanks!

[acburst]

This is on purpose. We are looking into using a wrapping label format in the future tho.

[timelyportfolio]

This proves quite difficult when pairing with other libraries. Might another solution or workaround be provided, so that I will not need to custom build to avoid this problem or hack JS/override CSS?

Thanks so much for a really, really nice library.

[JulianKingman]

The reason I brought it up is I needed to make an inline list of checkboxes to represent weekdays. To actually understand which checkbox goes with which label, I would need to reverse them. For now I'll need to do some weird CSS to accomplish this... not a problem, but not quite right either.

Thanks!

[tobias74]

any news on the wrapping label format? Would be nice :-)

[zeraphie]

Most certainly +1ing this, I typically think that for a browser checkbox that there are way too many circumstances for it to be useful, and the base override being applied in a blanket style is too restricting, would there be a way of adding something like a 'browser-default' class (or adding classes to the checkbox+label combo) in order to have the browser defaults applied?

[KokoDoko]

👍 Same problem here. Why does the whole checkbox disappear if there is no label? I don't want my checkboxes to have a label....
I can't even use the class 'browser-default' to make a regular html checkbox appear...

[BabatundeAlo]

Same problem...how would i tie an event to emit a check all function

[friek108]

Same problem, I wanted to render a checkbox for a table row (with no label obviously), is this possible even with a workaround?

[MicahStevens]

Not a real solution, but when using checkboxes in a datagrid, I used the following CSS to get them to show up without labels:

 [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: static;
    left: 0px; 
    opacity: 1; 
  }

[kmmbvnr]

@friek108 you can use a space as a checkbox label on a table row

<td class="action-checkbox">
    <input class="action-select" name="_selected_action" id="_selected_action_1" type="checkbox" value="2483">
    <label for="_selected_action_1">&nbsp;</label>
 </td>

demo: http://forms.viewflow.io/admin/integration/city/

[Thanood]

I think even a comment works. 😃
Should be any DOM object, actually.

http://codepen.io/anon/pen/XNJgjq

[friek108]

Thanks all. The above works for a grid. The challenges continue as there are backend libraries out there that render checkboxes in different ways - eg. yii2 wraps all checkboxes like this: <label><input type="checkbox"></label>, and you can't change it to have the correct sequence.. not sure what the correct 'standards' way should be.. or if wrapper labels should work..

[pulkitpahwa]

Is there any way I can use default checkbox ?

[jonwhittlestone]

Is there any way I can use default checkbox ?

+1

I am experiencing a few performance issues, I suspect caused as a consequence of the animation. (and I have an Angular watcher for bulk select with these checkboxes)

[morinx]

This is causing problem in Django formsets since the label changes depending on the checkbox id #.
Does anyone know a workaround for Django DELETE checkbox?

[kmmbvnr]

To solve this, labels could be added at runtime.

http://codepen.io/kmmbvnr/pen/VpppEe

    $(document).ready(function() {
      $('input[type=checkbox]').each(function() {
        if(this.nextSibling.nodeName != 'label') {
          $(this).after('<label for="'+this.id+'"></label>')
        }
      })
    })
         

[HIRANO-Satoshi]

Checkboxes disappeared. The following code exists in a library and I could not modify it.

<label>
   <input type="checkbox" class="leaflet-control-layers-selector">
    label_string
</label>

Here is a simple workaround. It worked for me.

[type="checkbox"].leaflet-control-layers-selector {
    position: static !important;
    left: 0px  !important; 
    opacity: 1  !important; 
}

[grekpg]

This is magic css to repair spoiled by materialze css.

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
position: static!important;
left: 0px!important;
opacity: 1!important;
visibility: visible!important;
pointer-events: all!important;
}

I think it is absurd to hide all inputs, even those that are not changed. It is not too complicated to hide those that have labels .... Why authors dont add some var or class for replaced checkboxes and only this is hidden ?

[metacoding]

Checkbox samples in your website doesn't follow the label order and so they are not shown. Please fix the code shown here: https://materializecss.com/checkboxes.html

[ghost]

If you want to use the checkbox without a visible span and not be able to click outside the box, use this.

<label>
    <input type="checkbox"/>
    <span style="padding-left: 0px;">
    </span>
</label>

[Mayankgbrc]

This will work:

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>
</label>

[kuduk]

My personal work-around is using switches instead of check boxes https://materializecss.com/switches.html