[SalesForce] Toggle input: there is a way to control the alignment of label and toggle

The following code generate toggle inputs with the corresponding label on their left but the toggles themselves are not aligned.

<template>
    <div class="slds-box">
        <h2 class="header">Toggle</h2>
        <lightning-input type="toggle" label="Basic option" name="input1"></lightning-input>
        <lightning-input type="toggle" label="Required option" name="input2" checked required></lightning-input>
        <lightning-input type="toggle" label="Disabled option" name="input3" checked disabled></lightning-input>
    </div>
</template>

I have to display several toggles and I want to put all the label aligned to the left of the parent div and all the toggles aligned with the right of the parent div.

I checked the documentation but there isn't any info about this, should I implement a custom solution with slds?


A partial solution is to use a slds-form class div together with a slds-form-element_horizontal as explicated in the following code:

<template>
    <div class="slds-box">
    <h2 class="header">Toggle</h2>
    <div class="slds-form">
        <div class="slds-form-element_horizontal">
            <lightning-input type="toggle" label="Basic option" name="input1"></lightning-input> 
        </div>
        <div class="slds-form-element_horizontal">
            <lightning-input type="toggle" label="Required option" name="input2" checked required></lightning-input> 
        </div>
        <div class="slds-form-element_horizontal">
            <lightning-input type="toggle" label="Disabled option" name="input3" checked disabled></lightning-input> 
        </div>
   </div>
 </div>
</template>

The result should be visible here. Anyway the code should work in any playground.

It's a partial solution because all toggles are aligned except the required one that is shifted to the right by the space given by the required symbol (the red asterisk).

Best Answer

The issue you are facing in regards to missaligned elements is due to the abbreviation tag added which is by default, on the left side of toggle elements (or input's) which causes your elements to unalign.

LWC's shadow dom will not allow you to change this on namepspaced components, therefore, your only chance is to actually create your own component where you controll where what is displayed. For example, the following template, will render the <abbr> on the right side of the toggle button when set to required:

<div class="slds-form">
    <div class="slds-form-element">
    <label class="slds-checkbox_toggle slds-grid">
    <span class="slds-form-element__label slds-m-bottom_none">Toggle Label</span>
    <input type="checkbox" name="checkbox" aria-describedby="toggle-desc" value="on" />
    <span id="toggle-desc" class="slds-checkbox_faux_container" aria-live="assertive">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-checkbox_on">Enabled</span>
        <span class="slds-checkbox_off">Disabled</span>
    </span>
    <abbr class="slds-required" title="required">* </abbr>
    </label>
</div>

enter image description here

furthermore, you cacn separate your labels and toggle buttons in separate columns and control the width, in order to maintain a certain size and avoid missalignment problems, as what you seem to be experiencing, on the downside, you will basically have to create the toggle button's from scratch alongisde the accomanying logic.

Related Topic