0

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.

<:lightning-input
   type="date"
   label="First Payment Date"
   value={xyz}
   onchange={xyzchnage}
></lightning-input:>

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

<:b><:lightning-input
    type="date"
    label="Bold Focus Text"
    value={xyz}
    onchange={xyzchnage}
></lightning-input><:/b>

Any help or suggestion is greatly appreciated.

2

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.

  • +1. In the easy-ish method, how will you do label-stacked/inline based on user preference? – salesforce-sas Sep 26 at 2:04
  • 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 at 13:10
  • @Sharif91 It's your job to make it look good. – gNerb Sep 26 at 14:24
0
<legend class="slds-form-element__legend slds-form-element__label">Desired Label</legend>
<lightning-input
  variant="label-hidden"
></lightning-input>

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

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.