Enable and Disable Next Button in Flow in Salesforce

With custom component, we can enable and disable buttons in Flow.

Sample Flow:

Screen - First and Last Name:
We get the First and Last name from the user.

Assignment - Assign Lead Name:
We are assigning values from Screen Component to objLead Record variable's FirstName and LastName.

Screen - Lead Screen:
We are using the LWC Component to get the Company. When the Company is filled, the Next button will be enabled. When the Company is not filled, the Next button will be disabled.

Create Records - Create Lead:

Screen - Lead Created:




    <table cellspacing="2" cellpadding="2">
            <td>First Name</td>
            <td>Last Name</td>
            <td><lightning-input type="text" placeholder="Enter the Company Name" onchange={handleChange}></lightning-input></td>
        <tr><td colspan="2"><br/></td></tr>
                <lightning-button label="Back" variant="brand" onclick={handleBack}></lightning-button>
                <lightning-button label="Next" variant="brand" onclick={handleNext} disabled={checkBool}></lightning-button>

LWC JavaScript:

import { LightningElement, api, track } from 'lwc';
import {FlowAttributeChangeEvent, FlowNavigationNextEvent, FlowNavigationBackEvent } from 'lightning/flowSupport';

export default class CreateLeadFlow extends LightningElement {

    @api LeadRec;
    @api Company;
    @track checkBool = true;
    handleNext( event ) {
        const nextNavigationEvent = new FlowNavigationNextEvent();       


    handleBack( event ) {
        const nextNavigationEvent = new FlowNavigationBackEvent();       

    handleChange( event ) {
        this.Company = event.target.value;
        if ( this.Company )
            this.checkBool = false;
            this.checkBool = true;


LWC JavaScript-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
        <targetConfig targets="lightning__FlowScreen">
            <property name="LeadRec" label="Lead" type="@salesforce/schema/Lead" />
            <property name="Company" label="Lead Company" type="String" />



  1. Hi, I am facing issue in retaining variable from screen1 to screen2 for multiscreen LWC flow.

    Like in screen1 I am providing user input fro FirstName and in Screen2 I am providing user input for LastName and Email but while clicking on Previous button screen1 input is become blank. Can you please help me in this.

    1. Check this - https://help.salesforce.com/articleView?id=000350820&language=en_US&mode=1&type=1
      It is working as designed.

  2. Hi, do you have any suggestions for how to align the buttons in the component to the right, the same way the standard ones are aligned? Thanks.

    1. Yes. You can use slds float right to align it to the right.

    2. That didn't work, but using slds-text-align_right did:

      Inside a parent component .cmp file:

      div class="slds-text-align_right"