In my LWC html template I use which is works perfectly. But recently I came across a requirement that says to bold just the label and not the input value field. Below is an example of the code (ignore the":" i know they do not belong.

   label="First Payment Date"

I am unable to put the attribute surrounding the label but I am wrap completely around it. Example:

    label="Bold Focus Text"

Any help or suggestion is greatly appreciated.


Easy-ish way

Use the variant attribute to hide the label and create your own label for the component.

The hardest way

Visit the slds website to get the HTML behind the component.

Then you can do what ever you want. This approach would require quite a lot of extra work to get it to behave exactly correctly so I would weigh the work to the value. This seems like a high-effort, low-value requirement.

| improve this answer | |
  • +1. In the easy-ish method, how will you do label-stacked/inline based on user preference? – salesforce-sas Sep 26 '19 at 2:04
  • 1
    When doing the easier approach, the labels do not align with other labels. So from a GUI perspective it does not look good. – Sharif91 Sep 26 '19 at 13:10
  • @Sharif91 It's your job to make it look good. – gNerb Sep 26 '19 at 14:24
<legend class="slds-form-element__legend slds-form-element__label">Desired Label</legend>

This give the Label a heavy weight (makes it look bold compared to other labels in the lightning page

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