<lightning:input type=“toggle”> how to set the label above the input component

Question

I am using lightning:input type=“toggle”,

By default the label is displayed to the left of the component:

Here is my code:

<lightning:input type="toggle"
                 label="My Label: "
                 name="toggle"
                 checked="{!v.record.myCheckbox__c}"/>

I want the label to be displayed above the toggle button, but cannot find a way to do that.

Answer 1

Unfortunately, SLDS doesn't have a "toggle with label above" out of the box, so lightning:input doesn't really have a feature like this, either. However, you can simulate it with a few SLDS bits:

<div class="slds-form slds-form_stacked">
    <div class="slds-form-element">
        <label class="slds-form-element__label" for="toggle">My Label</label>
        <lightning:input type="toggle"
                         label=""
                         variant="label-hidden"
                         name="toggle"
                         /> 
    </div>
</div>

Otherwise, you might want to stick with writing your own custom toggle component using slds, instead, but customize it to use a stacked label.