0

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:

enter image description here

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

|improve this question|||||
2

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>
|improve this answer|||||
  • the label is there, it just doesnt render =( – glls Nov 20 '17 at 21:09
  • Whats your reason for wanting to use checkbox-button? Seems like you want what checkbox offers – Zack Walton Nov 20 '17 at 21:12
  • testing only, as mentioned above, i can completely restyle a checkbox to look as mentioned in the doc, however, I would have expected it to work OOTB (after all, it is documented as such) – glls Nov 20 '17 at 21:14
  • I edited my answer which what I think is going on – Zack Walton Nov 20 '17 at 21:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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