0

My requirement is to put an asterisk before a lightning-input-field in my LWC. So I tried below code :-

Earlier :-

<lightning-input-field field-name='AccountId'></lightning-input-field>

Now :-

<abbr title="required" class="slds-required">*</abbr>
<label class="slds-form-element__label" style="margin-right: 0.5rem;">Account Name</label>
<lightning-helptext class="customIcon" content={fieldsInfo.AccountId.inlineHelpText}></lightning-helptext>
<lightning-input-field field-name='AccountId' variant="label-hidden"></lightning-input-field>

But the issue I am facing is - variant="label-hidden" hides the label but not the default help text and hence i see two help text.

Before :- enter image description here

Now:- enter image description here

And If I don't use my custom help text then label and default help text comes in 2 lines. enter image description here

0

If you are using lightning-input-field and you are not working with a standard field, you can use the field definition to control if it is required or not:

To persist requiredness on a field, select the Required checkbox when defining the custom field in Setup. A required field is displayed with a red asterisk next to the field label. An error message is displayed below a required field if you try to submit the form before entering a value.

Source: Documentation

If you have a standard field, you can simple add the red asterisk like you are doing. I would still have a the lightning-input-field handle the label and help text, so don't use the label-hidden variant.
You should probably handle some input validation in your javascript, unless you merely want the cosmetic part of the red asterisk.

Try this:

<abbr title="required" class="slds-required">*</abbr>
<lightning-input-field field-name="AccountId"></lightning-input-field>
  • But in this case Account Name is a standard field on Order object which can not be edited for required checkbox. – arpit gupta Aug 13 at 12:18
  • I tried that too but then asterisk and lightning-input-field comes in 2 different lines. – arpit gupta Aug 13 at 18:24

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.