Bootstrap: Custom Control Checkbox not working without label

[petewulf]

When ommitting the label tag in a custom-control-input, the checkbox is not showing up

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
</div>

Sometimes one would need a styled checkbox without a label, especially when working with selection lists or tables.

[FrancisStat]

Yup i got the same problem. I have a table of radio buttons and the label is in the table column headers. The custom radio buttons don't show up if there's no label.

<div class="custom-control custom-radio" role="group">
    <input 
        type="radio" 
        name="quest-27" 
        id="quest-27-10" 
        class="custom-control-input position-static" 
        aria-label="Never" 
        value="1">
</div>

It doesn't work with or without the position-static class.

I did more tests and it absolutely needs a label with the class custom-control-label next to it or else it doesn't show up. If i add a label without this class it still doesn't show up. If i add a label with the classes custom-control-label sr-only it doesn't show up either.

I guess the custom control is tied to label.custom-control-label::before?

[jipexu]

why omitted the tag ? you can let the label text empty or use sr-only ?

[FrancisStat]

@jipexu it doesn't work either if you add the sr-only class to the label. An empty label element with the class custom-control-label works but it's kind of a hack and it's not what the boostrap documentation recommend to do : https://getbootstrap.com/docs/4.0/components/forms/#without-labels.

[jipexu]

you noticed this for the 4.0 and 4.1 ?

[FrancisStat]

I'm on 4.0.0 right now which is the last version published on npm.

[jipexu]

i use this method empty label in several context ... probably not the best way but found only this one

[FrancisStat]

I just updated to 4.1.0 and still not showing up. I guess i'll have to use an empty label for now. Here's what i did i think it's probably cleaner than an empty label :

<div class="custom-control custom-radio" role="group">
    <input 
        type="radio" 
        name="quest-27" 
        id="quest-27-10" 
        class="custom-control-input"
        value="1">
    <label class="custom-control-label">
        <span class="sr-only">Never</span>
    </label>
</div>

[petewulf]

My version is 4.0.0 published on npm.

Working with empty labels is working, but thats not a good practice as it results in unneeded code overhead.

[FrancisStat]

I looked at the css code and i don't think it's an issue. It's actually by design. The custom-control-label class basically attaches a fake control to the label and when you click that fake control you in fact click the label since it's part of it and when you click a label in a browser it clicks the checkbox or radio button. You can do fake on/off slider with the same technic. Of course can't work if there's no label. So to make it works they would need to use a new _hack_. The doc should be updated though to make it clear that removing the label and using the position-static class wont work with custom controls.

[ghost]

The custom checkbox is also off-center when used with a blank label.

https://jsfiddle.net/wkewpegp/8/

[FrancisStat]

@AndyCJ It's because the div.custom-control element has a left padding of 1.5em (to give space for the fake control) while the fake control is 1em width. The div.custom-control left padding is slightly larger than the custom control (to separate the custom control from the label) so when the label element is empty it looks off center (while it's not if you put a border to the div.custom-control you can see it's centered). To counter that you can reduce the left padding of the div.custom-control to 1em when the label is empty and it will be centered. Should probably be something handled by bootstrap but the use case if kind of niche. Usually you want a label tied to the checkbox.

[ghost]

@FrancisStat

Thank you for the suggestion, that worked a treat. I'll pop a helper class in to our SASS to cover this usage.

I agree you want a label when making a "classic" form layout for sure.
Two fairly mainstream "alternative" uses would be a checkbox in a Table cell where the column header is the label, or on a panel where you're indicating your selecting what the entire panel represents.

[mdo]

Docs explain how these are built—the <label> element with .custom-control-label is used to generate the custom "checkbox". The only way around this, which isn't ideal given there's no label to explain the element, is another element with that class. Example: https://jsbin.com/hoxuvuteza.

[AlessandroVecchi]

I have the same problem (v 4.1.1)
Using "text-hide" instead of "sr-only" it works!

[cichy380]

This problem starts from Bootstrap v4.1.1 (https://github.com/twbs/bootstrap/pull/25944)

Fix empty custom-control-label alignment issue
Before: https://codepen.io/anon/pen/yRdegO
After: https://codepen.io/anon/pen/bmPEgX

.custom-control-label {
  vertical-align: top;
}

source: https://github.com/twbs/bootstrap/pull/27566#issue-227128125

[ThomasObale]

I know this is a little late hah. Just for future reference

.custom-control-label::after { display: none; }

[Omi0]

I've checked and checked and checked all over again and realized that I've forgotten to put for attribute to the label...

[DiegoAndresCortes]

Checkboxes aren't working properly for 'mass' checking.
E.g. If I have a table/list with checkboxes it can't get the "id" of the main checkbox because there's none for the label

[anthonyadamski]

Suggesting we reopen this. When hiding label using the "text-hide" method, checkboxes are still off centered due to the padding that exists to offset the label from the checkbox.

[futhr]

```scss
.custom-control {
padding-left: 0;

.custom-control-label {
  // set same width/height as before and after
  width: 1em; 
  height: 1em;

  &::before,
  &::after {
    left: 0;
  }
}

.custom-control-input {
  display: none; // optional
}

}
```

[IMalaniak]

The problem is, that You have to use label "for" attribute, and id for input, because it triggers the script

[setezerocinco]

This worked 100% for me. Checkbox is there without label:

<div class="custom-control custom-checkbox mr-sm-2">
    <input id="FieldName" type="checkbox" class="custom-control-input" />
    <label for="FieldName" class="custom-control-label">
        <span class="sr-only"></span>
    </label>
</div>