Use LWC in Flow Salesforce Part 1

by Rijwan Mohmmed

Hello Salesforce Trailblazers!, today we are going to discuss Use LWC in Flow Salesforce. By embedding LWC in Flow, Lightning Web Components brings a whole new level of interactivity and customization to your Flow screens, enabling you to create more engaging and user-friendly experiences. We can pass data to each other in FLOW and LWC.
In this blog, we will pass data Flow to LWC.

Also, check this: Rich Text Area Field in LWC

Key Highlights :

  1. User-Centric: LWCs allow you to design Flow screens that match your exact needs and user preferences.
  2. Interactivity: You can build components with advanced functionalities, like data validation, dynamic calculations, or interactive forms.
  3. Customization: LWCs can be tailored to fit your brand and style, providing a seamless user experience.
  4. Dynamic Forms: Create forms with custom validations and interactive elements.
  5. Guided User Journeys: Use LWCs to guide users through complex processes.
  6. Data Visualization: Display data in visually engaging ways.

Code :

1. Create an LWC that complements your Flow’s purpose, whether it’s capturing data, displaying information, or performing calculations.


    <lightning-card title="Use LWC in Flow Salesforce Part - 1 (Pass data Flow to LWC)" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
			<lightning-input label="Name" type="text" name="name" value={name} onchange={handleChange}>
            <lightning-input label="Email" type="email" name="email" value={email} onchange={handleChange}>
            <lightning-input label="Phone" type="phone" name="phone" value={phone} onchange={handleChange}>


import { LightningElement, api} from 'lwc';

export default class EmbedLWC extends LightningElement {
    @api name;
    @api phone;
    @api email;

    handleChange(event) { 
        let fieldName =;

        if(fieldName == 'name') {
        } else if(fieldName == 'email') {
        } else if(fieldName == 'phone') {


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">
        <targetConfig targets="lightning__FlowScreen">
            <property name="name" type="String"/> 
			<property name="phone" type="String"/> 
			<property name="email" type="String"/>

2. Add the LWC to your Flow screen, simply by dragging and dropping it onto your canvas. Here we create 3 text fields, which are name, email, and phone. After this, we will drag and drop our LWC component which we already created. When you click this LWC component, 3 fields show on the right side. We will assign flow input values in these so the LWC field can change on change flow fields change.

Output :

Reference :

  1. LWC attributes for Flow
  2. Using LWC in Flow
What’s your Reaction?

You may also like

Leave a Comment