Create prompt dialogs using LightningPrompt in LWC

Stop using JavaScript prompt() immediately because you can use the brand new LWC/Aura component LightningPrompt instead of that. In this post, I will show you how to create this beautiful and elegant prompt dialog in Lightning web components.

Use Case

You need to show a popup dialog to the user and ask for any input. So you can use the LightningPrompt component instead of using the SLDS modal or a prompt.

The LightningPrompt Component

This component shows a modal popup with a header, message, and input box. There are three different parameters to this component.

1. message - the message you want to display on dialog.
2. label - this is the header label for the dialog.
3. defaultValue - this is the initial input value, you can skip this if you don't want the default value.

Steps for creating an alert using LightningPrompt

1. Import the lightning prompt component.
   

   import LightningPrompt from "lightning/prompt";
   

   
   
2. Write a function to open LightningPrompt. Set the message, label, and defaultValue attributes as per your requirement.
   

   handlePromptClick() {
       LightningPrompt.open({
           message: "this is the prompt message",
           //theme defaults to "default"
           label: "Please Respond", // this is the header text
           defaultValue: "initial input value" //this is optional
       }).then((value) => {
           if (value) {
               // do something with the value
           }
       });
   }
   

3. Call the function handlePromptClick.

Complete Code Sample for LightningPrompt

This code example shows a prompt to the user at the click of a button. If the input is valid displays a success alert, otherwise displays an error alert.

lightningPromptDemo.js

import { LightningElement } from "lwc";
import LightningPrompt from "lightning/prompt";
import LightningAlert from "lightning/alert";
export default class LightningPromptDemo extends LightningElement {
    handlePromptClick() {
        LightningPrompt.open({
            message: "this is the prompt message",
            //theme defaults to "default"
            label: "Please Respond", // this is the header text
            defaultValue: "initial input value" //this is optional
        }).then((value) => {
            if (value) {
                // do something with the value
                this.handleSuccessAlertClick(value);
            } else {
                this.handleErrorAlertClick();
            }
        });
    }

    async handleSuccessAlertClick(value) {
        await LightningAlert.open({
            message: "You entered:" + value,
            theme: "success",
            label: "Success!"
        });
    }

    async handleErrorAlertClick() {
        await LightningAlert.open({
            message: "You entered nothing!",
            theme: "error",
            label: "Error!"
        });
    }
}

lightningPromptDemo.html

<template>
    <lightning-button
        variant="brand"
        onclick={handlePromptClick}
        label="Show Prompt Dialog"
    >
    </lightning-button>
</template>

Code Output

Related Posts

• Creating standard Alert, Confirm, Prompt dialogs in LWC
• How to create an Alert using LightningAlert LWC?
• How to create a Confirm dialog using LightningConfirm LWC?

You can find all the code from this post on this GitHub repo: Lightning Dialogs.

I hope this was helpful. Did you ever build something like this? What did you use? Let me know in the comments. Thanks for reading!