I have a lightning-record-edit-form
with lightning-input-field
components inside. I don't want to display the standard field label because the 40 character constraint is too much. Instead, I've created a custom label to give me room for all of the text and to allow me to translate it in a multi-lingual org. I've wrapped the field in the appropriate classes to make the field in-line with the rest of the fields in my form and give it the required asterisk (which doesn't appear if variant="label-hidden")
. My code:
Component.js
import { LightningElement, api } from 'lwc';
// custom labels
import some_field_custom from '@salesforce/label/c.Adding_New_Company';
export default class MyLWC extends LightningElement {
label = {
some_field_custom,
};
}
Component.html
<!-- inside lightning-record-edit-form -->
<div class="slds-form-element slds-form-element_stacked">
<label for="" class="slds-form-element__label">
<abbr title="required" class="slds-required">*</abbr>
{label.some_field_custom}
</label>
<lightning-input-field variant="label-hidden"
field-name="some_field__c"
required>
</lightning-input-field>
</div>
An issue with this approach is that there isn't an association between the custom <label>
and the <input>
that the component generates. Is there any way of joining the field and the label together using the for
attribute on the label?
Additionally, is it possible to hide the help text from the lightning-input-field
when overriding the label?
Edit 2021-4-14 Some additional details. Putting the following into the LWC's HTML:
<label for="example">Example</label>
<lightning-input-field field-name="Test__c" id="example" variant="label-hidden"></lightning-input-field>
Renders as:
<label c-mycomponent_mycomponent="" for="example-172">Example</label>
<lightning-input-field c-mycomponent_mycomponent="" id="example-172" class="slds-form-element">
<lightning-input class="slds-form-element" lightning-input_input-host="">
<span lightning-input_input="" data-aria="" class="slds-assistive-text"></span>
<div lightning-input_input="" class="slds-form-element__control slds-grow">
<span lightning-input_input="" class="slds-checkbox">
<input lightning-input_input="" type="checkbox" id="checkbox-232" name="Test__c" value="">
<label lightning-input_input="" for="checkbox-232" class="slds-checkbox__label">
<span lightning-input_input="" class="slds-checkbox_faux"></span>
<span lightning-input_input="" class="slds-form-element__label slds-assistive-text">Test</span>
</label>
</span>
</div>
</lightning-input>
</lightning-input-field>
Screenshot:
While it visually looks correct, clicking on the label will not check the checkbox and a screen reader will still use the field label generated and not the supplied label.
Looking at the output, it seems that lightning-input-field
will wrap its own lightning-input
and the issue is that there's no means of accessing the generated label inside of the lightning-input
as it will always default to what its parent component pulls for the field label.