I'am very new to slds.I have used Lightning input type tag for displaying the checkbox.Now checkbox is Appearing in left side.

Present Image:

enter image description here

  <lightning:input type="checkbox"  label="Selected :"  value="{!v.displayComparison.Selected__c}" />


But I need to display checkbox in right side of the label:

enter image description here

Tried code: I have tried this link: Is this possible to position label for inputCheckbox on the right hand side?

   <lightning:input type="checkbox" class="myCheckbox" label="Checkbox label" />


     .THIS .myCheckbox{
       display: inline-block;
     float: left;

Image: enter image description here


I am also new to SLDS but I have tried below code with some extra div tag to achieve the same.

<div class="slds-grid slds-wrap">
        <div class="slds-col slds-size_1-of-13 slds-p-right_x-small">
        <div class="slds-col slds-size_1-of-12">
            <lightning:input type="checkbox" />

below is how this will look like:

enter image description here

Please correct me if this is not what you were trying to achieve.


You can remove the standard label through the variant attribute:

<lightning:input type="checkbox" variant="label-hidden" ...

and add the label text separately.

Though if you want the clicks of the label to change the checkbox you will have to figure out a way to set the for attribute of the label element.


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.