How to display toggle button in Lightning web component - Salesforce Globe For You

Solution: Use lightning-input with type= "toggle" to display toggle button as shown below

<lightning-input type="toggle" label="Toggle Checkbox" name="input"></lightning-input>

Example:

toggleButtonLWC.html

<template>

    <lightning-card title="Toggle Button in LWC Component">

        <lightning-input type="toggle" label="Toggle Button" name="input"></lightning-input>

    </lightning-card>

</template>

toggleButtonLWC.js

import { LightningElement } from 'lwc';

export default class ToggleButtonLWC extends LightningElement {}

toggleButtonLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Output: