prompt

The prompt function, a wrapper for the <mdui-dialog> component. It offers a more user-friendly alternative to the native window.prompt function. This function allows you to open a dialog with a text field without the need to write HTML code for the component.

Usage

Import the function:

import { prompt } from 'mdui/functions/prompt.js';

Example:

open
<mdui-button class="example-button">open</mdui-button>

<script type="module">
  import { prompt } from "mdui/functions/prompt.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    prompt({
      headline: "Prompt Title",
      description: "Prompt description",
      confirmText: "OK",
      cancelText: "Cancel",
      onConfirm: (value) => console.log("confirmed: " + value),
      onCancel: () => console.log("canceled"),
    });
  });
</script>

API

prompt(options: Options): Promise<string>

The function accepts an Options object as a parameter and returns a Promise. If the dialog is closed by clicking the confirm button, the Promise resolves with the value entered in the text field. If the dialog is closed in any other way, the Promise is rejected.

Options

Property Type Default
headline string -
The title of the dialog.
description string -
The description of the dialog.
icon string -
The Material Icons name displayed at the top of the dialog.
closeOnEsc boolean false
Whether the dialog can be closed by pressing the Esc key. If set to true, the dialog closes when the Esc key is pressed.
closeOnOverlayClick boolean false
Whether the dialog can be closed by clicking on the overlay.
confirmText string OK
The text for the confirm button.
cancelText string Cancel
The text for the cancel button.
stackedActions boolean false
Whether to stack the bottom action buttons vertically.
queue string -

The queue name.

By default, the queue is disabled. If this function is invoked multiple times, multiple dialogs will appear simultaneously.

If a queue name is provided, dialogs with the same queue name will open sequentially, each one after the previous one closes.

The dialog(), alert(), confirm(), and prompt() functions share the same queue if their queue names match.

onConfirm (value: string, dialog: Dialog) => void | boolean | Promise<void> -

A callback function that is triggered when the confirm button is clicked.

The function receives the value of the text field and the dialog instance as parameters, and this refers to the dialog instance.

By default, clicking the confirm button closes the dialog. If the return value is false, the dialog remains open. If the return value is a promise, the dialog closes after the promise resolves.

onCancel (value: string, dialog: Dialog) => void | boolean | Promise<void> -

A callback function that is triggered when the cancel button is clicked.

The function receives the value of the text field and the dialog instance as parameters, and this refers to the dialog instance.

By default, clicking the cancel button closes the dialog. If the return value is false, the dialog remains open. If the return value is a promise, the dialog closes after the promise resolves.

onOpen (dialog: Dialog) => void -

A callback function that is triggered when the dialog starts to open.

The function receives the dialog instance as a parameter, and this also refers to the dialog instance.

onOpened (dialog: Dialog) => void -

A callback function that is triggered when the dialog's opening animation completes.

The function receives the dialog instance as a parameter, and this also refers to the dialog instance.

onClose (dialog: Dialog) => void -

A callback function that is triggered when the dialog starts to close.

The function receives the dialog instance as a parameter, and this also refers to the dialog instance.

onClosed (dialog: Dialog) => void -

A callback function that is triggered when the dialog's closing animation completes.

The function receives the dialog instance as a parameter, and this also refers to the dialog instance.

onOverlayClick (dialog: Dialog) => void -

A callback function that is triggered when the overlay is clicked.

The function receives the dialog instance as a parameter, and this also refers to the dialog instance.

validator (value: string) => boolean | string | Promise<void> -

A validation function for the text field, takes the text field's value as a parameter. this refers to the TextField instance.

Validation is executed after the browser's native validation API is successfully passed.

If it returns a boolean value, false indicates a validation failure, and true indicates a validation success.

If it returns a string, a non-empty string indicates a validation failure, with the returned string serving as the error message.

If it returns a Promise, a resolution indicates validation success, while a rejection indicates validation failure. The reason for rejection is used as the error message.

textFieldOptions Partial<TextField> -
The internal text field is a <mdui-text-field> component. You can configure the <mdui-text-field> component using this parameter.
MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons