3

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

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

enter image description here

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.

7

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.

  • I have used your solution and added the attribute variant="label-hidden" this way the label is hidden and it looks perfect – Itai Shmida Feb 27 '18 at 16:52
  • 1
    @ItaiShmida Ah. I missed something, too. We both learned something today! – sfdcfox Feb 27 '18 at 16:53
  • how to change label color – Sagar Raut Nov 22 '18 at 6:50
  • @SagarRaut Comments are not for new questions, and I'm really not sure what specifically you're asking for. Please ask a new question, include all pertinent details, and we'll be glad to help you. You can read more about How to Ask a good question. – sfdcfox Nov 22 '18 at 8:25

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.