---
title: "React Forms Alert, confirm & prompt Example | Mobiscroll"
component: "Forms"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/forms/alert-confirm-prompt"
---

# Alert, confirm & prompt - React Forms demo

React alert, confirm and prompt dialogs for giving feedback to users and for quick & focused data entry. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/forms/alert-confirm-prompt)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/form-components/forms/alert-confirm-prompt)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/form-components/forms/alert-confirm-prompt)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/forms/alert-confirm-prompt.md), [jQuery](https://demo.mobiscroll.com/jquery/forms/alert-confirm-prompt.md), [Angular](https://demo.mobiscroll.com/angular/forms/alert-confirm-prompt.md), [Vue](https://demo.mobiscroll.com/vue/forms/alert-confirm-prompt.md)

## Description

Use the alert, confirm and prompt messages to pop a message box in the middle of the screen. Alert the user or collect feedback at the same time. These controls cannot be dismissed by pressing the overlay, which avoids closing it by mistake.

## What this demo shows

- This demo shows three common dialog types: Alert, Confirm, and Prompt.
- **Alert** Displays a title, message, and confirmation button.
- **Confirm** Presents separate actions with customizable button text.
- **Prompt** Collects user input directly within the dialog.
- **Input types** Configures the Prompt with different input types, including a password field.
- **Modal behavior** Opens each dialog as a modal overlay and prevents dismissal by clicking the overlay, keeping the required action in focus.

## Best for

- **Alerts and notifications** Presenting important information that users must acknowledge before continuing.
- **Action confirmation** Asking users to confirm or cancel a consequential action, such as deleting an item or submitting a change.
- **Short text input** Collecting a name, note, reference, or other brief value without navigating to a separate form.
- **Sensitive input** Requesting a password or similar concealed value within a focused dialog.
- **Required decisions** Keeping users focused when they must choose an action or provide input before returning to the underlying interface.

## Tutorial

### Alert

Alerts have a `title`, `message` and a confirmation button.

```html
<Alert
  title='Cellular Data is Turned Off for "Safari"'
  message="You can turn on cellular data for this app in Settings."
/>
```

### Confirm

Besides a `title` and `message`, the confrim dialog supports a customizable `okText` and `cancelText`.

```html
<Confirm
  title="Use location service?"
  message="Help apps determinde location. This means sending anonymous location data, even when no apps are running."
  okText="Agree"
  cancelText="Disagree"
/>
```

### Prompt

Adding to the `title` and `message`, the prompt provides a focused way of capturing user input. With the `inputType`, passwords can be entered and the `placeholder` provides a helper text.

```html
<Prompt
  title="Sign in to iTunes Store"
  message='Enter the Apple ID password for "hello@mobiscroll.com".'
  placeholder="Password"
  inputType="password"
/>
```

## Code

### JSX

```jsx
import { Alert, Button, Confirm, Page, Prompt, setOptions } from '@mobiscroll/react';
import { useCallback, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  const [isAlertOpen, setAlertOpen] = useState(false);
  const [isConfirmOpen, setConfirmOpen] = useState(false);
  const [isPromptOpen, setPromptOpen] = useState(false);

  const showAlert = useCallback(() => {
    setAlertOpen(true);
  }, []);

  const showConfirm = useCallback(() => {
    setConfirmOpen(true);
  }, []);

  const showPrompt = useCallback(() => {
    setPromptOpen(true);
  }, []);

  const closeAlert = useCallback(() => {
    setAlertOpen(false);
  }, []);

  const closeConfirm = useCallback(() => {
    setConfirmOpen(false);
  }, []);

  const closePrompt = useCallback((value) => {
    setPromptOpen(false);
    console.log('The password is: ' + value);
  }, []);

  return (
    <Page>
      <Alert
        title='Cellular Data is Turned Off for "Safari"'
        message="You can turn on cellular data for this app in Settings."
        isOpen={isAlertOpen}
        onClose={closeAlert}
      />
      <Confirm
        title="Use location service?"
        message="Help apps determinde location. This means sending anonymous location data, even when no apps are running."
        okText="Agree"
        cancelText="Disagree"
        isOpen={isConfirmOpen}
        onClose={closeConfirm}
      />
      <Prompt
        title="Sign in to iTunes Store"
        message='Enter the Apple ID password for "hello@mobiscroll.com".'
        placeholder="Password"
        inputType="password"
        isOpen={isPromptOpen}
        onClose={closePrompt}
      />
      <Button onClick={showAlert}>Alert</Button>
      <Button onClick={showConfirm}>Confirm</Button>
      <Button onClick={showPrompt}>Prompt</Button>
    </Page>
  );
}

export default App;
```

### TSX

```tsx
import { Alert, Button, Confirm, Page, Prompt, setOptions } from '@mobiscroll/react';
import { FC, useCallback, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const App: FC = () => {
  const [isAlertOpen, setAlertOpen] = useState(false);
  const [isConfirmOpen, setConfirmOpen] = useState(false);
  const [isPromptOpen, setPromptOpen] = useState(false);

  const showAlert = () => {
    setAlertOpen(true);
  };

  const closeAlert = useCallback(() => {
    setAlertOpen(false);
  }, []);

  const showConfirm = () => {
    setConfirmOpen(true);
  };

  const closeConfirm = useCallback(() => {
    setConfirmOpen(false);
  }, []);

  const showPrompt = () => {
    setPromptOpen(true);
  };

  const closePrompt = useCallback((value: string | null) => {
    setPromptOpen(false);
    console.log('The password is: ' + value);
  }, []);

  return (
    <Page>
      <Alert
        title='Cellular Data is Turned Off for "Safari"'
        message="You can turn on cellular data for this app in Settings."
        isOpen={isAlertOpen}
        onClose={closeAlert}
      />
      <Confirm
        title="Use location service?"
        message="Help apps determinde location. This means sending anonymous location data, even when no apps are running."
        okText="Agree"
        cancelText="Disagree"
        isOpen={isConfirmOpen}
        onClose={closeConfirm}
      />
      <Prompt
        title="Sign in to iTunes Store"
        message='Enter the Apple ID password for "hello@mobiscroll.com".'
        placeholder="Password"
        inputType="password"
        isOpen={isPromptOpen}
        onClose={closePrompt}
      />

      <Button onClick={showAlert}>Alert</Button>
      <Button onClick={showConfirm}>Confirm</Button>
      <Button onClick={showPrompt}>Prompt</Button>
    </Page>
  );
};
export default App;
```

## Implementation notes

- `title` and `message` are the common options shared by `Alert`, `Confirm`, and `Prompt`.
- `Confirm` adds `okText` and `cancelText` to relabel its two action buttons (defaults are generic Ok/Cancel text).
- `Prompt` adds `placeholder` (helper text shown in the empty input) and `inputType` (e.g. `'password'` to mask the entered value).
- Overlay-click dismissal is disabled by default on all three dialog types, so the required action stays in focus until an explicit button is pressed.
- Invocation differs by framework: JS/jQuery call the imperative functions `mobiscroll.alert({...})`, `mobiscroll.confirm({...})`, `mobiscroll.prompt({...})` directly from a click handler, and the dialog opens immediately; Angular injects the `Notifications` service (`constructor(public notify: Notifications) {}`) and calls `this.notify.alert({...})`, `this.notify.confirm({...})`, `this.notify.prompt({...})` the same way.
- React and Vue render the dialogs as declarative components instead - `<Alert>`, `<Confirm>`, `<Prompt>` in React and `<MbscAlert>`, `<MbscConfirm>`, `<MbscPrompt>` in Vue - each controlled by an `isOpen` boolean prop; a button's `onClick`/`@click` sets `isOpen` to `true`, and the dialog's `onClose`/`@close` callback sets it back to `false`.
- `Prompt`'s close callback receives the entered value as its argument (`null` if the dialog was cancelled), e.g. `closePrompt = (value: string | null) => {...}` in React.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-react.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config react
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config react --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Next: [Toast & snackbar](https://demo.mobiscroll.com/react/forms/notifications.md) - React notification examples of toast and snackbar with or w/o action. With undo, retry or custom functionality.