0

Is there a way to remove the checkmark when the toggle is in the checked state? enter image description here

This is what I have on my HTML -

<lightning-input type="toggle" name="test" data-id={testId} data-name={testName} message-toggle-active="Active" message-toggle-inactive="Inactive" onchange={handleToggleChange}></lightning-input></td>

1 Answer 1

0

You need to use the CSS to remove the checkmark from the toggle when the checked state. Use the border-style CSS attribute set to none. Add the below CSS code into your component CSS file.

.slds-checkbox_toggle [type=checkbox]:checked+.slds-checkbox_faux:after, .slds-checkbox_toggle [type=checkbox]:checked+.slds-checkbox--faux:after, .slds-checkbox_toggle [type=checkbox]:checked~.slds-checkbox_faux:after, .slds-checkbox_toggle [type=checkbox]:checked~.slds-checkbox--faux:after, .slds-checkbox_toggle [type=checkbox]:checked+.slds-checkbox_faux_container .slds-checkbox_faux:after, .slds-checkbox_toggle [type=checkbox]:checked+.slds-checkbox--faux_container .slds-checkbox--faux:after, .slds-checkbox--toggle [type=checkbox]:checked+.slds-checkbox_faux:after, .slds-checkbox--toggle [type=checkbox]:checked+.slds-checkbox--faux:after, .slds-checkbox--toggle [type=checkbox]:checked~.slds-checkbox_faux:after, .slds-checkbox--toggle [type=checkbox]:checked~.slds-checkbox--faux:after, .slds-checkbox--toggle [type=checkbox]:checked+.slds-checkbox_faux_container .slds-checkbox_faux:after, .slds-checkbox--toggle [type=checkbox]:checked+.slds-checkbox--faux_container .slds-checkbox--faux:after {
        border-style: none !important;
}

Updated Code::

HTML::

<template>
<label class="slds-checkbox_toggle slds-grid">
<span class="slds-form-element__label cxd-toggle__label-medium">Block List</span>
<input type="checkbox" name="cxdBlockCB" onchange={unlockCheckboxesRelaxed} checked={relaxedChecked} disabled={relaxedDisabled} />
<span class="slds-checkbox_faux_container" style="float: left;">
        <span class="slds-checkbox_faux" style="float: left;"></span>
        <span class="slds-checkbox_on" style="float: right; margin: 6px;">Active</span>
        <span class="slds-checkbox_off" style="float: right; margin: 6px;">Inactive</span>
</span>
<span class="slds-form-element__label slds-assistive-text">Toggle</span>
</label>
</template>

JS::

import { LightningElement, track } from 'lwc';
export default class ToggleCheckboxLWC extends LightningElement {
}

CSS::

.slds-checkbox_toggle [type=checkbox]:checked+.slds-checkbox_faux:after, .slds-checkbox_toggle [type=checkbox]:checked+.slds-checkbox--faux:after, .slds-checkbox_toggle [type=checkbox]:checked~.slds-checkbox_faux:after, .slds-checkbox_toggle [type=checkbox]:checked~.slds-checkbox--faux:after, .slds-checkbox_toggle [type=checkbox]:checked+.slds-checkbox_faux_container .slds-checkbox_faux:after, .slds-checkbox_toggle [type=checkbox]:checked+.slds-checkbox--faux_container .slds-checkbox--faux:after, .slds-checkbox--toggle [type=checkbox]:checked+.slds-checkbox_faux:after, .slds-checkbox--toggle [type=checkbox]:checked+.slds-checkbox--faux:after, .slds-checkbox--toggle [type=checkbox]:checked~.slds-checkbox_faux:after, .slds-checkbox--toggle [type=checkbox]:checked~.slds-checkbox--faux:after, .slds-checkbox--toggle [type=checkbox]:checked+.slds-checkbox_faux_container .slds-checkbox_faux:after, .slds-checkbox--toggle [type=checkbox]:checked+.slds-checkbox--faux_container .slds-checkbox--faux:after {
    border-style: none !important;
}

Output::

enter image description here

2
  • Hello Tushar, Thanks for the response. But it is not working for me. Also I am not understanding the CSS as well.
    – sumchans
    Dec 1, 2023 at 15:02
  • @sumchans I have updated and added code with output in my answer please check. Dec 4, 2023 at 4:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .