20

I would like to use the lightning:input component in a data table. Therefore my question is: Is it possible to remove the label attribute on the lightning component?

<lightning:input type="number" label=" " name="aNumberInputField" />

is quite not the solution for this (shifted... doesn't look good), and removing the attribute throws an error. Any advise?

Improve this question

3 Answers 3

Reset to default
37

Yes you can set the variant attribute to "label-hidden", so your code should look like:

<lightning:input type="number" label="number" variant = "label-hidden" name="aNumberInputField"/>
Improve this answer
1
  • Yeah, that's a nice new variant. Thank you! No additional css anymore :)
    – loeachim
    Sep 1, 2017 at 10:33
16

If you still want to use the lightning base components without the labels you can put the display to none and the visibility to hidden like this 

.THIS .slds-form-element__label {
      display : none;
      visibility : hidden;
}
Improve this answer
1
  • 1
    Thank you very much! I'll use it like this: .THIS .nolabel .slds-form-element__label{ display: none; visibility: hidden }
    – loeachim
    Feb 20, 2017 at 10:58
4

The label property, for now, is mandatory on that control. It may not be a perfect fit, but the set of <ui:inputXXX> controls provide very similar functionality without the requirement for a label. You may find that you have to recreate some functionality (depending on your needs), but you'll be very nearly there from the get go.

Improve this answer

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.