As I am using <lightning-record-edit-form> & inside it I used <lightning-input-field>. My requirement is like If the input field is of checkbox then I want to display the checkbox field label on right side & checkbox button on left side. By default it shows the label on top of checkbox button.


You can achieve it by adding a variant="label-inline" to the lightning-input-field

| improve this answer | |
  • this works well only for input field data type text,date,email not for Checkbox. – Pratap Jadhavar May 25 at 18:35

As of now, if you use variant="label-inline" on the lightning input field with the checkbox type field, the field label is aligned to the left side, and the checkbox is placed on the right side. There is no option to change that in standard lightning-input-field component. To get the label on the right side and checkbox on left, you need to build your own component using slds.

<div class="slds-form-element">
  <div class="slds-form-element__control">
    <div class="slds-checkbox">
      <input type="checkbox" name="options" id="checkbox-unique-id-73" value="checkbox-unique-id-73" checked="" />
      <label class="slds-checkbox__label" for="checkbox-unique-id-73">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Checkbox Label</span>


| improve this answer | |

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.