1

I am using a lightning-input-field which uses the variant=label-hidden and required attributes. This is so I can use my own custom label and put the asterisk in my custom label when needed.

In almost all types of fields, this works! The label and asterisk from the lightning-input-field is hidden, except for one case: the checkbox

When the lightning-input-field is a checkbox and is required, for some reason the required asterisk is NOT hidden and appears on the left of the checkbox

Is there some easy way to make sure to hide the checkbox asterisk so that I can use my own at my custom label?

Improve this question

1 Answer 1

Reset to default
1

Found a solution! use class='form' for your lightning-record-edit-form and use this to get rid of the asterisk in the checkbox (for example inside connectedCallback). Make sure that the custom asterisks do not use title="required"

const style = document.createElement('style')
style.innerText = '.form .slds-required[title="required"] {display: none;}'
this.template.querySelectorAll('.form').forEach( element => {
    element.appendChild(style)
})
Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.