0

When using standard HTML label and input tags the label and for"username" is not working as expected. From what I can see the ID for the input is being changed when the component renders to e.g. username-10. How can I prevent this from happening? The the form needs to meet accessibility requirements.

<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
Improve this question
1

1 Answer 1

Reset to default
0

The only way I found to be able to create labels was to use lightning "input" (and related) web components with the "label" attribute.

Code excerpts as examples:

<lightning-textarea name="caseNotes" label="Quick Notes" value={quickNotes}
    onkeyup={handleQuickNotesKeyUp} class="large-textarea"
    field-level-help="Use this field to record temporary notes about the Case.">
</lightning-textarea>

<lightning-input label="Phone" title="Phone" name="Phone"
    disabled={isNewContactProposed} value={newContact.Phone} variant=""
    type="phone" onkeyup={handleContactKeyUp} onblur={handleContactBlur}
    onfocus={handleContactFocus} class="newContactPhone">
</lightning-input>


<lightning-combobox name="caseRecordType" label="Record Type" onchange={handleChangeRecType}
    options={optCaseTypes} value={selRecordType} class="slds-m-bottom_x-small">
</lightning-combobox>

Note, I used custom "class" values along with jQuery and/or CSS to format the labels into the structure I wanted. There was no other way to grab the "id" of the input fields as LWC appears to create the ids upon generation of the page.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .