1

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.

3 Answers 3

4

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

1
  • this works well only for input field data type text,date,email not for Checkbox. Commented May 25, 2020 at 18:35
1

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>
      </label>
    </div>
  </div>
</div>

Refer

0

I observed that with lightning-checkbox-group component the labels appear on the right. So I am able to use that component with a single option.Example usage of checkbox group

You must log in to answer this question.

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