Is this possible to position label for inputCheckbox on the right hand side?

Question

When I try to use standard lightning tag ui:inputCheckbox it displays label on the left

<ui:inputCheckbox label="Checkbox label" labelClass="uiLabel-right" value="{!v.checkbox}"  change="{!c.onCheckboxValueChange}"/>

even though I am trying to set label Class as "uiLabel-right". I am not sure though if this is valid value for labelClass: I found this term in the comments for another question on SSE.

What am I trying to achieve is actually to get the result described in Lightning design system. However, I see that lightning tags library is contradicting Lightning design system, which seems to be quite strange.

I can't use pure html since I need to have onchange handler and easy boolean set for disabled attribute.

Is there any way to solve this contradiction between Lightning design system and Lightning framework?

Answer 1

There are actually two different possible ways.

1. Looks like we could try to use tag lightning:input type="checkbox" at our own risk (the component declared as a "beta" state) as RedDevil suggested.

   <lightning:input type="checkbox" label="Checkbox label" onchange="{!c.onCheckboxValueChange}"/>

2. Also it is possible to have a class .myCheckbox:

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

and to add this class to the inputCheckbox:

<ui:inputCheckbox label="Checkbox label" cClass="myCheckbox" value="{!v.checkbox}"  change="{!c.onCheckboxValueChange}"/>

as suggested D. Griff in his answer to his own question.

Answer 2

try a lightning:input type="checkbox" instead.It works the way you want

<lightning:input type="checkbox" label="Red" name="red" checked="true"/>

I read in the sprint 2017 release notes that lightning design system classes are going to come kind of embedded with base lightning components, so what they are referring in LDS could be that all these things are possible with lightning:input tags.

It's a recommendation from salesforce to use base Lightning namespaced components over the Ui ones whenever you find one in both namespaces

Base Lightning components are the building blocks that make up the modern Lightning Experience, Salesforce1, and Lightning Communities user interfaces. Base Lightning components incorporate Lightning Design System markup and classes, providing improved performance and accessibility with a minimum footprint.

These base components handle the details of HTML and CSS for you. Each component provides simple attributes that enable variations in style. This means that you typically don’t need to use CSS at all. The simplicity of the base Lightning component attributes and their clean and consistent definitions make them easy to use, enabling you to focus on your business logic.

You can find base Lightning components in the lightning namespace to complement the existing ui namespace components. In instances where there are matching ui and lightning namespace components, we recommend that you use the lightning namespace component. The lightning namespace components are optimized for common use cases. Beyond being equipped with the Lightning Design System styling, they handle accessibility, real-time interaction, and enhanced error messages.