Lightning:input label attribute not rendered when type=“checkbox-button”

Question

While checking the lightning:input documentation, I wanted to test out the checkbox-button type attribute only to find out that the label is not rendered when using it:

<lightning:input type="checkbox" label="Add pepperoni" name="addPepperoni" checked="true" value="pepperoni" />

VS

<lightning:input type="checkbox-button" label="Add salami" name="addSalami" value="salami" />

Which looks like this:

So I had to revert back to input type="checkbox". I know Lightning:input is in beta (and has been for a while), just throwing this out there since its literally a copy paste from the documentation and it doesnt seem to work (or maybe I am missing something).

Answer 1

I don't think you are missing anything. From this line in the documentation,

Checkbox buttons let you select one or more options with an alternative visual design.

It makes me think that the lack of a label is on purpose. Also looking into the lightning design system, the docs for checkbox-button shows that the label has the class slds-assistive-text on the label. This means that the label is hidden but is able to be read by screen readers as to make it accessible. Here describes the css class used.

I would suggest using something like:

<label class="slds-form-element__label">Add salami</label>