[SalesForce] Is this possible to position label for inputCheckbox on the right hand side

It looks like http://documentation.auraframework.org/auradocs#reference?descriptor=ui:inputCheckbox&defType=component , has an attribute called "domId" which sounds like what we want, unfortunately when trying to use it I get [ERROR]: No ATTRIBUTE named domId found: Source .

However, this attribute is not listed in the ui:inputCheckbox docs located at /auradocs . I guess because it hasn't made it over quite yet.

I'm not sure what ui:inputCheckbox really buys us in this situation, as we aren't using the div and label wrappers the component generates (it only seems to do that when we specify a label attribute, which we don't want to do since we want the slds classes and layout).

Something like this seems to work for right now:

<label for="{!contact.Id}" class="slds-checkbox"> <input type="checkbox" id="{!contact.Id}" onchange="{!c.checkboxChange}"/> <span class="slds-checkbox--faux"></span> <span class="slds-form-element__label">{!contact.Name}</span> </label>

({checkboxChange: function(component, event, helper){ console.log(event.target.id); })

Problems with this approach:

1) There can be id collisions. A temporary workaround could be adding a namespace to the id.

2) There could also be more built into the ui:inputCheckbox change event than the html5 change event, but the html5 change event seems pretty robust: https://developer.mozilla.org/en-US/docs/Web/Events/change .

Long term, I bet this is problem could be solved by the domId attribute.

What about combining the slds compound form with the pageBlockSection something like:

    <fieldset class="slds-form--compound slds-form--compound--horizontal">
        <apex:pageBlock >
            <apex:pageBlockSection columns="2">
                <legend class="slds-form-element__label slds-text-title--caps">{! $Label.LBL_008 }</legend>
                <apex:repeat value="{! $ObjectType.Contact.FieldSets.DatosBasicos }" var="f">
                    <div class="form-element__group">
                        <div class="slds-form-element__row slds-m-top--x-small">
                            <label class="slds-form-element__label slds-size--1-of-4 slds-col--padded slds-text-align--right" for="field">{! f.Label }</label>
                            <div class="slds-form-element slds-size--1-of-4" id="field"> {!contact[f] } </div>
                        </div>
                    </div>
                </apex:repeat>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </fieldset>