i tried to add a checkbox using ui:inputCheckbox and i wasn't able to align the checkbox with the label

this is the code:

<ui:inputCheckbox aura:id="leadsCheckBox" label="leads" click="{!c.handleFilters}" value="true"/>

and in the web app i see

enter image description here

please assist, thanks

  • This is a matter of modifying the styling applied to your markup. Take a look into SLDS for some tips on Salesforces Lightning Design System and if you have any free time turn over to the Lightning Components Trailhead.
    – TSmith
    Mar 20 '17 at 10:59
  • 1
    @TSmith i already looked at the SLDS, copied the code from there as an example and it worked, but i want to try and use the ui:inputCheckbox. so i think its better to stick to the SLDS like you said, thanks!
    – Dana Griff
    Mar 20 '17 at 12:41

I found the answer! I wrote a class in css called .myCheckbox:

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

and added the class to the inputCheckbox:

<ui:inputCheckbox class="myCheckbox" aura:id="checkboxLeads" label="Leads" change="{!c.doInit}" value="True"/>

You can use <p> tag or even a <div> to display the label separately.

<ui:inputCheckbox aura:id="leadsCheckBox"  click="{!c.handleFilters}" value="true"/>

I used standard SLDS classes to achieve it :

  <ui:inputCheckbox aura:id="checkbox" labelClass="slds-p-horizontal--small slds-float--left" label="My Check" change="{!c.onCheck}"/>
  • 1
    "i did it like this" does not provide an explanation, mind further elaborating on the classes you used alongisde any docuemtnation link(s)? thanks
    – glls
    Aug 6 '18 at 20:04
  • the css classes I used are standard SLDS classes. This code line will show the checkboxes in one line with the label as asked.
    – sfdx bomb
    Aug 7 '18 at 10:51
  • Please edit your post and explain, some users are not aware of this
    – glls
    Aug 7 '18 at 11:25
  • I am trying to use the standard SLDS classes to get the checkbox label to line up with the checkbox. I am not having success. Below is my code: Sep 23 '19 at 15:04
  • $A.createComponent( "ui:inputCheckbox", { "value" : component.getReference("v.EventRSVP."+ fieldAPIName), "aura:id": "checkbox", "label": fieldLabel, "labelClass":"slds-p-horizontal--small slds-float--left" } Sep 23 '19 at 15:05

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.