SweetAlert2

https://sweetalert2.github.io/
Admin
SweetAlert2 is a JavaScript library for creating beautiful, customizable, accessible popups and...
Tokens:31,691
Snippets:248
Trust Score:9.7
Update:2 hours ago
Show doc for...
Tokens:
Raw
### Install via npm

Source: https://sweetalert2.github.io/

Command to install SweetAlert2 using npm.

```bash
$ npm install sweetalert2
```

--------------------------------

### AJAX request example

Source: https://sweetalert2.github.io/

Shows how to use preConfirm to fetch data from an API and display the result.

```javascript
Swal.fire({
  title: "Submit your GitHub username",
  input: "text",
  inputAttributes: { autocapitalize: "off" },
  showCancelButton: true,
  confirmButtonText: "Look up",
  showLoaderOnConfirm: true,
  preConfirm: async (login) => {
    try {
      const githubUrl = `
        https://api.github.com/users/${login}
      `;
      const response = await fetch(githubUrl);
      if (!response.ok) return Swal.showValidationMessage(`
          ${JSON.stringify(await response.json())}
        `);
      return response.json();
    } catch (error) {
      Swal.showValidationMessage(`
        Request failed: ${error}
      `);
    }
  },
  allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
  if (result.isConfirmed) Swal.fire({
    title: `${result.value.login}'s avatar`,
    imageUrl: result.value.avatar_url
  });
});
```

--------------------------------

### Install SweetAlert2 Laravel package via Composer

Source: https://sweetalert2.github.io/recipe-gallery/sweetalert2-laravel.html

Run this command in your Laravel project root to install the sweetalert2/laravel package.

```bash
$ composer require sweetalert2/laravel
```

--------------------------------

### Swal.getPopup()

Source: https://sweetalert2.github.io/

Gets the popup element.

```APIDOC
## Swal.getPopup()

### Description
Get the popup.

### Method
Swal.getPopup()

### Parameters
None

### Returns
DOM element - The popup element.
```

--------------------------------

### SweetAlert2 multiple inputs example

Source: https://sweetalert2.github.io/

Demonstrates how to create multiple inputs using the html parameter and preConfirm to return the values as an array.

```javascript
const { value: formValues } = await Swal.fire({
  title: "Multiple inputs",
  html: `
    <input id="swal-input1" class="swal2-input">
    <input id="swal-input2" class="swal2-input">
  `,
  focusConfirm: false,
  preConfirm: () => {
    return [document.getElementById("swal-input1").value, document.getElementById("swal-input2").value];
  }
});
if (formValues) Swal.fire(JSON.stringify(formValues));
```

--------------------------------

### SweetAlert2 file input example

Source: https://sweetalert2.github.io/

Prompts for an image file, reads it as a data URL, and displays the uploaded picture.

```javascript
const { value: file } = await Swal.fire({
  title: "Select image",
  input: "file",
  inputAttributes: {
    "accept": "image/*",
    "aria-label": "Upload your profile picture"
  }
});
if (file) {
  const reader = new FileReader();
  reader.onload = (e) => {
    Swal.fire({
      title: "Your uploaded picture",
      imageUrl: e.target.result,
      imageAlt: "The uploaded picture"
    });
  };
  reader.readAsDataURL(file);
}
```

--------------------------------

### SweetAlert2 url input example

Source: https://sweetalert2.github.io/

Prompts for a URL with a placeholder and displays the entered URL.

```javascript
const { value: url } = await Swal.fire({
  input: "url",
  inputLabel: "URL address",
  inputPlaceholder: "Enter the URL"
});
if (url) Swal.fire(`Entered URL: ${url}`);
```

--------------------------------

### Swal.getImage()

Source: https://sweetalert2.github.io/

Gets the image element.

```APIDOC
## Swal.getImage()

### Description
Get the image.

### Method
Swal.getImage()

### Parameters
None

### Returns
DOM element - The image element.
```

--------------------------------

### Swal.getIcon()

Source: https://sweetalert2.github.io/

Gets the icon element.

```APIDOC
## Swal.getIcon()

### Description
Get the icon.

### Method
Swal.getIcon()

### Parameters
None

### Returns
DOM element - The icon element.
```

--------------------------------

### Swal.mixin example for reusable toast configuration

Source: https://sweetalert2.github.io/

Creates a reusable SweetAlert2 instance with toast options, including a timer and progress bar, and fires a success toast. The didOpen hook attaches mouseenter/mouseleave handlers to pause and resume the timer.

```javascript
Swal.mixin({
  toast: true,
  position: "top-end",
  showConfirmButton: false,
  timer: 3000,
  timerProgressBar: true,
  didOpen: (toast) => {
    toast.onmouseenter = Swal.stopTimer;
    toast.onmouseleave = Swal.resumeTimer;
  }
}).fire({
  icon: "success",
  title: "Signed in successfully"
});
```

--------------------------------

### Swal.fire() - Theme Usage

Source: https://sweetalert2.github.io/

Examples of using the theme parameter with Swal.fire() for different themes.

```APIDOC
## Swal.fire() - Theme Usage

### Description
Demonstrates how to set the theme parameter in Swal.fire() to use different themes.

### Method
Swal.fire()

### Parameters
- **theme** (string) - Required - The theme to use. Possible values: 'dark', 'auto', 'bootstrap-5', 'bootstrap-4', 'material-ui', 'bulma'.

### Request Example
```javascript
Swal.fire({
  title: 'Dark theme',
  theme: 'dark'
})
```

### Response
No response body; the popup is displayed.
```

--------------------------------

### SweetAlert2 text input example

Source: https://sweetalert2.github.io/

Shows how to prompt for a text input with a default value fetched from an API and validate that the user enters something.

```javascript
const inputValue = (await (await fetch("//api.ipify.org?format=json")).json()).ip;
const { value: ipAddress } = await Swal.fire({
  title: "Enter your IP address",
  input: "text",
  inputLabel: "Your IP address",
  inputValue,
  showCancelButton: true,
  inputValidator: (value) => {
    if (!value) return "You need to write something!";
  }
});
if (ipAddress) Swal.fire(`Your IP address is ${ipAddress}`);
```

--------------------------------

### SweetAlert2 email input example

Source: https://sweetalert2.github.io/

Prompts for an email address with a placeholder and displays the entered email.

```javascript
const { value: email } = await Swal.fire({
  title: "Input email address",
  input: "email",
  inputLabel: "Your email address",
  inputPlaceholder: "Enter your email address"
});
if (email) Swal.fire(`Entered email: ${email}`);
```

--------------------------------

### SweetAlert2 date input example

Source: https://sweetalert2.github.io/

Prompts for a departure date, setting the minimum date to today using the didOpen callback.

```javascript
const { value: date } = await Swal.fire({
  title: "select departure date",
  input: "date",
  didOpen: () => {
    const today = (new Date()).toISOString();
    Swal.getInput().min = today.split("T")[0];
  }
});
if (date) Swal.fire("Departure date", date);
```

--------------------------------

### Declarative template example

Source: https://sweetalert2.github.io/

Defines a popup using a <template> tag with title, icon, buttons, and parameters. The popup is then fired with Swal.fire({ template: '#my-template' }).

```APIDOC
## Declarative template example

### Description
Defines a popup using a <template> tag with title, icon, buttons, and parameters. The popup is then fired with Swal.fire({ template: '#my-template' }).

### Template
```html
<template id="my-template">
  <swal-title>
    Save changes to "Untitled 1" before closing?
  </swal-title>
  <swal-icon type="warning" color="red"></swal-icon>
  <swal-button type="confirm">
    Save As
  </swal-button>
  <swal-button type="cancel">
    Cancel
  </swal-button>
  <swal-button type="deny">
    Close without Saving
  </swal-button>
  <swal-param name="allowEscapeKey" value="false" />
  <swal-param
    name="customClass"
    value='{ "popup": "my-popup" }' />
  <swal-function-param
    name="didOpen"
    value="popup => console.log(popup)" />
</template>
```

### Usage
```javascript
Swal.fire({ template: "#my-template" });
```

### Supported Template Elements
- `<swal-title>…</swal-title>`
- `<swal-html>…</swal-html>`
- `<swal-footer>…</swal-footer>`
- `<swal-param name="…" value="…" />`
- `<swal-function-param name="…" value="…" />`
- `<swal-button type="…" color="…" aria-label="…">…</swal-button>`
- `<swal-image src="…" width="…" height="…" alt="…" />`
- `<swal-icon type="…" color="…">…</swal-icon>`
- `<swal-input type="…" label="…" placeholder="…" value="…" />`
- `<swal-input-option value="…">…</swal-input-option>`

### Security
[Security] The **value** attribute of **swal-function-param** is evaluated using `new Function()`, which behaves like `eval()`. Only use **swal-function-param** with trusted template content.
```

--------------------------------

### SweetAlert2 password input example

Source: https://sweetalert2.github.io/

Prompts for a password with attributes like maxlength and autocapitalize, and displays the entered password.

```javascript
const { value: password } = await Swal.fire({
  title: "Enter your password",
  input: "password",
  inputLabel: "Password",
  inputPlaceholder: "Enter your password",
  inputAttributes: {
    maxlength: "10",
    autocapitalize: "off",
    autocorrect: "off"
  }
});
if (password) Swal.fire(`Entered password: ${password}`);
```

--------------------------------

### Swal.getProgressSteps()

Source: https://sweetalert2.github.io/

Gets the progress steps element.

```APIDOC
## Swal.getProgressSteps()

### Description
Get the progress steps.

### Method
Swal.getProgressSteps()

### Parameters
None

### Returns
DOM element - The progress steps element.
```

--------------------------------

### Swal.getTitle()

Source: https://sweetalert2.github.io/

Gets the popup title element.

```APIDOC
## Swal.getTitle()

### Description
Get the popup title.

### Method
Swal.getTitle()

### Parameters
None

### Returns
DOM element - The title element.
```

--------------------------------

### SweetAlert2 radio input example

Source: https://sweetalert2.github.io/

Uses a Promise for inputOptions to load radio options asynchronously, and validates that a choice is made.

```javascript
/* inputOptions can be an object or Promise */
const inputOptions = new Promise((resolve) => {
  setTimeout(() => {
    resolve({
      "#ff0000": "Red",
      "#00ff00": "Green",
      "#0000ff": "Blue"
    });
  }, 1000);
});
const { value: color } = await Swal.fire({
  title: "Select color",
  input: "radio",
  inputOptions,
  inputValidator: (value) => {
    if (!value) return "You need to choose something!";
  }
});
if (color) Swal.fire({ html: `You selected: ${color}` });
```

--------------------------------

### App.ts: Render PDF in SweetAlert2 popup

Source: https://sweetalert2.github.io/recipe-gallery/pdf-viewer.html

Imports SweetAlert2 and pdf.js, sets the worker source, and opens a SweetAlert2 modal with a canvas. In didOpen, it loads a sample PDF, gets the first page, and renders it onto the canvas at scale 1.5.

```TypeScript
import Swal from 'sweetalert2'
import * as pdfjsLib from 'pdfjs-dist'
import './styles.css'

const pdfjsWorkerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.js'
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorkerSrc

Swal.fire({
  title: 'PDF Viewer',
  html: '<canvas id="pdfCanvas"></canvas>',
  width: 800,
  showCloseButton: true,
  showConfirmButton: false,
  didOpen: async () => {
    const pdfUrl = 'https://getsamplefiles.com/download/pdf/sample-1.pdf'
    const pdf = await pdfjsLib.getDocument(pdfUrl).promise
    const page = await pdf.getPage(1)
    const viewport = page.getViewport({ scale: 1.5 })
    const canvas = Swal.getPopup()!.querySelector('#pdfCanvas') as HTMLCanvasElement
    canvas.height = viewport.height
    canvas.width = viewport.width
    await page.render({ canvasContext: canvas.getContext('2d')!, viewport }).promise
  },
})
```

--------------------------------

### SweetAlert2 textarea input example

Source: https://sweetalert2.github.io/

Prompts for a multi-line message with a placeholder and shows the entered text.

```javascript
const { value: text } = await Swal.fire({
  input: "textarea",
  inputLabel: "Message",
  inputPlaceholder: "Type your message here...",
  inputAttributes: { "aria-label": "Type your message here" },
  showCancelButton: true
});
if (text) Swal.fire(text);
```

--------------------------------

### Declarative template example

Source: https://sweetalert2.github.io/

Defines a SweetAlert2 popup using a <template> element with custom title, icon, buttons, and parameters. The swal-function-param value is evaluated with new Function(), so only use with trusted content.

```html
<template id="my-template">
  <swal-title>
    Save changes to "Untitled 1" before closing?
  </swal-title>
  <swal-icon type="warning" color="red"></swal-icon>
  <swal-button type="confirm">
    Save As
  </swal-button>
  <swal-button type="cancel">
    Cancel
  </swal-button>
  <swal-button type="deny">
    Close without Saving
  </swal-button>
  <swal-param name="allowEscapeKey" value="false" />
  <swal-param
    name="customClass"
    value='{ "popup": "my-popup" }' />
  <swal-function-param
    name="didOpen"
    value="popup => console.log(popup)" />
</template>
```

```javascript
Swal.fire({ template: "#my-template" });
```

--------------------------------

### Import embed-iframe theme and fire modal with iframe

Source: https://sweetalert2.github.io/recipe-gallery/modal-with-iframe.html

Import the embed-iframe theme CSS and set the theme option to 'embed-iframe' in Swal.fire. The example uses a YouTube iframe, hides the confirm button, and sets a width of 1000.

```javascript
import Swal from 'sweetalert2'

import 'sweetalert2/themes/embed-iframe.css' // import the embed-iframe theme

Swal.fire({

  theme: 'embed-iframe', // set the theme

  title: 'Modal with iframe',

  html: '<iframe frameborder="0" src="https://www.youtube.com/embed/6JxAis\_v2mw"></iframe>',

  showCloseButton: true,

  showConfirmButton: false,

  width: 1000,

})
```

--------------------------------

### Right-to-left support for RTL languages

Source: https://sweetalert2.github.io/

Example of an alert configured for RTL languages with Arabic text and custom icon HTML.

```javascript
Swal.fire({
  title: "هل تريد الاستمرار؟",
  icon: "question",
  iconHtml: "؟",
  confirmButtonText: "نعم",
  cancelButtonText: "لا",
  showCancelButton: true,
  showCloseButton: true
});
```

--------------------------------

### Old-school script include

Source: https://sweetalert2.github.io/

Alternative initialization by referencing the necessary files directly.

```html
<script src="sweetalert2.all.min.js"></script>
```

--------------------------------

### Swal.getCancelButton()

Source: https://sweetalert2.github.io/

Gets the 'Cancel' button element.

```APIDOC
## Swal.getCancelButton()

### Description
Get the "Cancel" button.

### Method
Swal.getCancelButton()

### Parameters
None

### Returns
DOM element - The cancel button element.
```

--------------------------------

### App.ts - Initialize SweetAlert2 with Blurred Backdrop

Source: https://sweetalert2.github.io/recipe-gallery/blurred-backdrop.html

Sets up the HTML body content and triggers a SweetAlert2 modal with the title 'I will blur the document with my backdrop'. Requires importing SweetAlert2 and the styles.css file.

```TypeScript
import Swal from 'sweetalert2'
import './styles.css'

document.body.innerHTML = `
<div>lorem ipsum dolor sit amet consectetur adipisicing elit</div>
`

Swal.fire({
  title: 'I will blur the document with my backdrop',
})
```

--------------------------------

### Swal.getDenyButton()

Source: https://sweetalert2.github.io/

Gets the 'Deny' button element.

```APIDOC
## Swal.getDenyButton()

### Description
Get the "Deny" button.

### Method
Swal.getDenyButton()

### Parameters
None

### Returns
DOM element - The deny button element.
```

--------------------------------

### Swal.fire() - Configuration Parameters

Source: https://sweetalert2.github.io/

Lists the configuration parameters that can be passed to Swal.fire() as an object.

```APIDOC
## Swal.fire() - Configuration Parameters

### Description
Lists the configuration parameters that can be passed to Swal.fire() as an object.

### Method
Swal.fire()

### Parameters
- **title** (string) - Optional - The title of the popup, as HTML. Default: ''
- **titleText** (string) - Optional - The title of the popup, as text. Useful to avoid HTML injection. Default: ''
- **html** (string) - Optional - A HTML description for the popup. If **text** and **html** are provided, **html** will be used. Security: SweetAlert2 does NOT sanitize this parameter. Default: ''
- **text** (string) - Optional - A description for the popup. If **text** and **html** are provided, **html** will be used. Default: ''
- **icon** (string) - Optional - The icon of the popup. Built-in icons: 'warning', 'error', 'success', 'info', 'question'. Default: undefined
- **iconColor** (string) - Optional - Change the color of the icon. Default: undefined
- **iconHtml** (string) - Optional - Custom HTML content for an icon. Default: undefined
- **animation** (boolean) - Optional - If set to false, the popup animation will be disabled. Default: true
- **theme** (string) - Optional - Theme of the popup. Possible values: 'light', 'dark', 'auto', 'borderless'. Default: 'light'
- **showClass** (object) - Optional - CSS classes for animations when showing a popup. Default: { popup: 'swal2-show', backdrop: 'swal2-backdrop-show', icon: 'swal2-icon-show' }
- **hideClass** (object) - Optional - CSS classes for animations when hiding a popup. Default: { popup: 'swal2-hide', backdrop: 'swal2-backdrop-hide', icon: 'swal2-icon-hide' }
- **backdrop** (boolean|string) - Optional - Whether to show a full screen click-to-dismiss backdrop. Can be boolean or string for CSS background. Default: true
- **toast** (boolean) - Optional - Whether to treat the alert as a toast notification. Default: false
- **target** (string) - Optional - The container element for adding popup into. Default: 'body'

### Request Example
```javascript
Swal.fire({
  title: 'My title',
  text: 'My text',
  icon: 'success',
  theme: 'dark'
})
```

### Response
No response body; the popup is displayed.
```

--------------------------------

### Swal.getConfirmButton()

Source: https://sweetalert2.github.io/

Gets the 'Confirm' button element.

```APIDOC
## Swal.getConfirmButton()

### Description
Get the "Confirm" button.

### Method
Swal.getConfirmButton()

### Parameters
None

### Returns
DOM element - The confirm button element.
```

--------------------------------

### Swal.getFocusableElements()

Source: https://sweetalert2.github.io/

Gets all focusable elements in the popup.

```APIDOC
## Swal.getFocusableElements()

### Description
Get all focusable elements in the popup.

### Method
Swal.getFocusableElements()

### Parameters
None

### Returns
Array of DOM elements - The focusable elements.
```

--------------------------------

### Swal.showLoading()

Source: https://sweetalert2.github.io/

Shows loader (spinner), useful with AJAX requests. By default the loader is shown instead of the 'Confirm' button, but you can pass another button to be replaced.

```APIDOC
## Swal.showLoading()

### Description
Shows loader (spinner), this is useful with AJAX requests. By default the loader be shown instead of the "Confirm" button, but if you want another button to be replaced with a loader, just pass it like this: **Swal.showLoading(Swal.getDenyButton())**.

### Method
Swal.showLoading(button)

### Parameters
- **button** (DOM element) - Optional - The button to be replaced by the loader. Defaults to the confirm button.

### Returns
None.
```

--------------------------------

### SweetAlert2 Queue with Progress Steps

Source: https://sweetalert2.github.io/recipe-gallery/queue-with-progress-steps.html

Creates a SweetAlert2 mixin with progress steps and fires three modals sequentially. Uses showClass and hideClass with 'swal2-noanimation' to avoid backdrop blinking. The final modal sets confirmButtonText to 'OK'.

```javascript
import Swal from 'sweetalert2'

const steps = ['1', '2', '3']

const Queue = Swal.mixin({
  progressSteps: steps,
  confirmButtonText: 'Next >',
  // optional classes to avoid backdrop blinking between steps
  showClass: { backdrop: 'swal2-noanimation' },
  hideClass: { backdrop: 'swal2-noanimation' },
})

;(async () => {
  await Queue.fire({
    title: 'Uno',
    currentProgressStep: 0,
  })
  await Queue.fire({
    title: 'Dos',
    currentProgressStep: 1,
  })
  await Queue.fire({
    title: 'Tres',
    currentProgressStep: 2,
    confirmButtonText: 'OK',
  })
})()
```

--------------------------------

### Swal.getFooter()

Source: https://sweetalert2.github.io/

Gets the popup footer element.

```APIDOC
## Swal.getFooter()

### Description
Get the popup footer.

### Method
Swal.getFooter()

### Parameters
None

### Returns
DOM element - The footer element.
```

--------------------------------

### Swal.getCloseButton()

Source: https://sweetalert2.github.io/

Gets the close button element.

```APIDOC
## Swal.getCloseButton()

### Description
Get the close button.

### Method
Swal.getCloseButton()

### Parameters
None

### Returns
DOM element - The close button element.
```

--------------------------------

### Separate stylesheet include

Source: https://sweetalert2.github.io/

Loads the script and stylesheet separately if desired.

```html
<script src="sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2.min.css">
```

--------------------------------

### Swal.getValidationMessage()

Source: https://sweetalert2.github.io/

Gets the validation message DOM node.

```APIDOC
## Swal.getValidationMessage()

### Description
Get the validation message DOM node.

### Method
Swal.getValidationMessage()

### Parameters
None

### Returns
DOM element - The validation message element.
```

--------------------------------

### Import SweetAlert2 (ES modules and CommonJS)

Source: https://sweetalert2.github.io/

Shows how to import SweetAlert2 using ES modules or CommonJS.

```javascript
import Swal from 'sweetalert2'

// or via CommonJS
const Swal = require('sweetalert2')
```

--------------------------------

### Swal.getActions()

Source: https://sweetalert2.github.io/

Gets the actions block (buttons container).

```APIDOC
## Swal.getActions()

### Description
Get the actions block (buttons container).

### Method
Swal.getActions()

### Parameters
None

### Returns
DOM element - The actions block element.
```

--------------------------------

### Swal.enableInput()

Source: https://sweetalert2.github.io/

Enables input.

```APIDOC
## Swal.enableInput()

### Description
Enable input.

### Method
Swal.enableInput()

### Parameters
None

### Returns
None.
```

--------------------------------

### Swal.getIconContent()

Source: https://sweetalert2.github.io/

Gets the icon content (without border).

```APIDOC
## Swal.getIconContent()

### Description
Get the icon content (without border).

### Method
Swal.getIconContent()

### Parameters
None

### Returns
DOM element - The icon content element.
```

--------------------------------

### Swal.getHtmlContainer()

Source: https://sweetalert2.github.io/

Gets the DOM element where the html/text parameter is rendered to.

```APIDOC
## Swal.getHtmlContainer()

### Description
Gets the DOM element where the **html**/**text** parameter is rendered to.

### Method
Swal.getHtmlContainer()

### Parameters
None

### Returns
DOM element - The HTML container element.
```

--------------------------------

### App.ts - SweetAlert2 with Bootstrap 5 and custom loader

Source: https://sweetalert2.github.io/recipe-gallery/bootstrap-custom-loader.html

Imports Bootstrap CSS and SweetAlert2, then on button click shows a modal with a text input, custom button styling, and a custom loader using a Bootstrap spinner. The preConfirm function shows loading and resolves after 3 seconds.

```typescript
import 'bootstrap'

import 'bootstrap/dist/css/bootstrap.css'

import Swal from 'sweetalert2'

import './styles.css'

document.querySelector('.trigger-swal')?.addEventListener('click', function () {

Swal.fire({

title: 'SweetAlert2 + Bootstrap 5',

input: 'text',

buttonsStyling: false,

showCancelButton: true,

customClass: {

confirmButton: 'btn btn-primary btn-lg mr-2',

cancelButton: 'btn btn-danger btn-lg',

loader: 'custom-loader',

},

loaderHtml: '<div class="spinner-border text-primary"></div>',

preConfirm: () => {

Swal.showLoading()

return new Promise((resolve) => {

setTimeout(() => {

resolve(true)

}, 3000)

})

},

})

})
```

--------------------------------

### Swal.getContainer()

Source: https://sweetalert2.github.io/

Gets the popup container which contains the backdrop and the popup itself.

```APIDOC
## Swal.getContainer()

### Description
Get the popup container which contains the backdrop and the popup itself.

### Method
Swal.getContainer()

### Parameters
None

### Returns
DOM element - The container element.
```

--------------------------------

### Swal.getInput()

Source: https://sweetalert2.github.io/

Gets the input DOM node. This method works with input parameter.

```APIDOC
## Swal.getInput()

### Description
Get the input DOM node, this method works with input parameter.

### Method
Swal.getInput()

### Parameters
None

### Returns
DOM element - The input element.
```

--------------------------------

### SweetAlert2 Configuration Parameters

Source: https://sweetalert2.github.io/

A comprehensive list of configuration options that can be passed to the Swal.fire() method to customize the popup appearance and behavior.

```APIDOC
## SweetAlert2 Configuration Parameters

### Description
These parameters can be passed to the `Swal.fire()` method to customize the popup's appearance, behavior, and content.

### Parameters

#### topLayer
- **type**: boolean
- **Default**: `false`
- **Description**: Set to `true` to put the popup on top of all other elements (Top Layer).

#### input
- **type**: string
- **Default**: `undefined`
- **Description**: Input field type, can be **text**, **email**, **password**, **number**, **tel**, **range**, **textarea**, **search**, **url**, **select**, **radio**, **checkbox**, **file**, **date**, **datetime-local**, **time**, **week**, **month**.

#### width
- **type**: string
- **Default**: `'32em'`
- **Description**: Popup window width, including paddings (_box-sizing: border-box_). Can be in any CSS unit (**px**, **em/rem**, **%**).

#### padding
- **type**: string
- **Default**: `'0 0 1.25em'`
- **Description**: Popup window padding. Can be in any CSS unit (**px**, **em/rem**, **%**).

#### color
- **type**: string
- **Default**: `undefined` (default color is `'#545454'`)
- **Description**: Color for title, content and footer (CSS **color** property).

#### background
- **type**: string
- **Default**: `undefined` (default background is `'#fff'`)
- **Description**: Popup window background (CSS background property).

#### position
- **type**: string
- **Default**: `'center'`
- **Description**: Popup window position, can be **'top'**, **'top-start'**, **'top-end'**, **'center'**, **'center-start'**, **'center-end'**, **'bottom'**, **'bottom-start'**, or **'bottom-end'**.

#### grow
- **type**: string or boolean
- **Default**: `false`
- **Description**: Paired with window position, sets the direction the popup should grow in, can be set to **'row'**, **'column'**, **'fullscreen'**, or **false**.

#### customClass
- **type**: object
- **Default**: `undefined`
- **Description**: A custom CSS class for the popup. The object can contain keys for `container`, `popup`, `header`, `title`, `closeButton`, `icon`, `image`, `htmlContainer`, `input`, `inputLabel`, `validationMessage`, `actions`, `confirmButton`, `denyButton`, `cancelButton`, `loader`, `footer`, `timerProgressBar`.

#### timer
- **type**: number
- **Default**: `undefined`
- **Description**: Auto close timer of the popup. Set in ms (milliseconds). See also Swal.getTimerLeft(), Swal.stopTimer(), Swal.resumeTimer(), Swal.toggleTimer(), Swal.isTimerRunning() and Swal.increaseTimer().

#### timerProgressBar
- **type**: boolean
- **Default**: `false`
- **Description**: If set to true, the timer will have a progress bar at the bottom of a popup. Mostly, this feature is useful with toasts.

#### heightAuto
- **type**: boolean
- **Default**: `true`
- **Description**: By default, SweetAlert2 sets html's and body's CSS **height** to **auto !important**. If this behavior isn't compatible with your project's layout, set **heightAuto** to **false**.

#### allowOutsideClick
- **type**: boolean or function
- **Default**: `true`
- **Description**: If set to **false**, the user can't dismiss the popup by clicking outside it. You can also pass a custom function returning a boolean value, e.g. if you want to disable outside clicks for the loading state of a popup.

#### allowEscapeKey
- **type**: boolean or function
- **Default**: `true`
- **Description**: If set to **false**, the user can't dismiss the popup by pressing the Esc key. You can also pass a custom function returning a boolean value, e.g. if you want to disable the Esc key for the loading state of a popup.

#### stopKeydownPropagation
- **type**: boolean
- **Default**: `true`
- **Description**: If set to **false**, SweetAlert2 will allow **keydown** events propagation to the document.

#### keydownListenerCapture
- **type**: boolean
- **Default**: `false`
- **Description**: Useful for those who are using SweetAlert2 along with Bootstrap modals. By default **keydownListenerCapture** is **false** which means when a user hits Esc, both SweetAlert2 and Bootstrap modals will be closed. Set **keydownListenerCapture** to **true** to fix that behavior.

#### showConfirmButton
- **type**: boolean
- **Default**: `true`
- **Description**: If set to **false**, a "Confirm"-button will not be shown.

#### showDenyButton
- **type**: boolean
- **Default**: `false`
- **Description**: If set to **true**, a "Deny"-button will be shown. It can be useful when you want a popup with 3 buttons.

#### showCancelButton
- **type**: boolean
- **Default**: `false`
- **Description**: If set to **true**, a "Cancel"-button will be shown, which the user can click on to dismiss the modal.

#### confirmButtonText
- **type**: string
- **Default**: `'OK'`
- **Description**: Use this to change the text on the "Confirm"-button.

#### denyButtonText
- **type**: string
- **Default**: `'No'`
- **Description**: Use this to change the text on the "Deny"-button.

#### cancelButtonText
- **type**: string
- **Default**: `'Cancel'`
- **Description**: Use this to change the text on the "Cancel"-button.

#### confirmButtonColor
- **type**: string
- **Default**: `undefined` (default color is `#3085d6`)
- **Description**: Use this to change the background color of the "Confirm"-button.

#### denyButtonColor
- **type**: string
- **Default**: `undefined` (default color is `#dd6b55`)
- **Description**: Use this to change the background color of the "Deny"-button.

#### cancelButtonColor
- **type**: string
- **Default**: `undefined` (default color is `#aaa`)
- **Description**: Use this to change the background color of the "Cancel"-button.

#### confirmButtonAriaLabel
- **type**: string
- **Default**: `''`
- **Description**: Use this to change the **aria-label** for the "Confirm"-button.

#### denyButtonAriaLabel
- **type**: string
- **Default**: `''`
- **Description**: Use this to change the **aria-label** for the "Deny"-button.

#### cancelButtonAriaLabel
- **type**: string
- **Default**: `''`
- **Description**: Use this to change the **aria-label** for the "Cancel"-button.

#### buttonsStyling
- **type**: boolean
- **Default**: `true`
- **Description**: Apply default styling to buttons. If you want to use your own classes (e.g. Bootstrap classes) set this parameter to **false**.

```

--------------------------------

### Swal.enableButtons()

Source: https://sweetalert2.github.io/

Enables the 'Confirm' and 'Cancel' buttons.

```APIDOC
## Swal.enableButtons()

### Description
Enable "Confirm" and "Cancel" buttons.

### Method
Swal.enableButtons()

### Parameters
None

### Returns
None.
```

--------------------------------

### SweetAlert2 checkbox input example

Source: https://sweetalert2.github.io/

Prompts for agreement to terms and conditions, with a custom validator that requires the checkbox to be checked.

```javascript
const { value: accept } = await Swal.fire({
  title: "Terms and conditions",
  input: "checkbox",
  inputValue: 1,
  inputPlaceholder: `
    I agree with the terms and conditions
  `,
  confirmButtonText: `
    Continue&nbsp;→
  `,
  inputValidator: (result) => {
    return !result && "You need to agree with T&C";
  }
});
if (accept) Swal.fire("You agreed with T&C :)");
```

--------------------------------

### Swal.update({...options})

Source: https://sweetalert2.github.io/

Updates popup options.

```APIDOC
## Swal.update({...options})

### Description
Updates popup options.

### Method
Swal.update(options)

### Parameters
- **options** (object) - Required - The options to update.

### Returns
None.
```

--------------------------------

### Custom width, padding, color, background

Source: https://sweetalert2.github.io/

Shows how to customize the alert's appearance with width, padding, color, background, and backdrop.

```javascript
Swal.fire({
  title: "Custom width, padding, color, background.",
  width: 600,
  padding: "3em",
  color: "#716add",
  background: "#fff url(/images/trees.png)",
  backdrop: `
    rgba(0,0,123,0.4)
    url("/images/nyan-cat.gif")
    left top
    no-repeat
  `
});
```

--------------------------------

### Swal.fire({...options})

Source: https://sweetalert2.github.io/

Fires a SweetAlert2 popup with the given options. The returned instance has a params property containing the frozen options passed to it.

```APIDOC
## Swal.fire({...options})

### Description
Displays a SweetAlert2 popup with the specified configuration options. The returned instance exposes a params property with the frozen options.

### Method
Swal.fire

### Parameters
#### Options Object
- **title** (string) - Optional - The title of the alert.
- **icon** (string) - Optional - The icon type (e.g., 'info', 'success').

### Request Example
```javascript
const swalInstance = Swal.fire({ title: 'Hello World!', icon: 'info' })
```

### Response
Returns a SweetAlert2 instance. The instance has a **params** property containing the frozen options passed to Swal.fire.

#### Response Example
```javascript
console.log(swalInstance.params.title) // Hello World!
console.log(swalInstance.params.icon)  // info
```
```

--------------------------------

### SweetAlert2 select input example

Source: https://sweetalert2.github.io/

Shows a select dropdown with grouped options and a custom validator that requires selecting 'oranges'.

```javascript
const { value: fruit } = await Swal.fire({
  title: "Select field validation",
  input: "select",
  inputOptions: {
    Fruits: {
      apples: "Apples",
      bananas: "Bananas",
      grapes: "Grapes",
      oranges: "Oranges"
    },
    Vegetables: {
      potato: "Potato",
      broccoli: "Broccoli",
      carrot: "Carrot"
    },
    icecream: "Ice cream"
  },
  inputPlaceholder: "Select a fruit",
  showCancelButton: true,
  inputValidator: (value) => {
    return new Promise((resolve) => {
      if (value === "oranges") resolve();
      else resolve("You need to select oranges :)");
    });
  }
});
if (fruit) Swal.fire(`You selected: ${fruit}`);
```

--------------------------------

### Include via jsDelivr CDN

Source: https://sweetalert2.github.io/

HTML script tag to load SweetAlert2 from jsDelivr CDN.

```html
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
```

--------------------------------

### SweetAlert2 Configuration Parameters

Source: https://sweetalert2.github.io/

A list of configuration parameters for SweetAlert2 that can be passed to the Swal.fire() method to customize the popup behavior and appearance.

```APIDOC
## SweetAlert2 Configuration Parameters

### Description
These parameters can be passed to the `Swal.fire()` method to customize the behavior and appearance of the alert popup.

### Parameters

#### reverseButtons
- **type**: boolean
- **Default**: `false`
- **Description**: Set to `true` to invert the default button positions (Confirm button on the right side).

#### focusConfirm
- **type**: boolean
- **Default**: `true`
- **Description**: Set to `false` to focus the first element in tab order instead of the Confirm button by default.

#### returnFocus
- **type**: boolean
- **Default**: `true`
- **Description**: Set to `false` to not return focus to the element that invoked the modal after the modal is closed.

#### focusDeny
- **type**: boolean
- **Default**: `false`
- **Description**: Set to `true` to focus the Deny button by default.

#### focusCancel
- **type**: boolean
- **Default**: `false`
- **Description**: Set to `true` to focus the Cancel button by default.

#### showCloseButton
- **type**: boolean
- **Default**: `false`
- **Description**: Set to `true` to show a close button in the top right corner of the popup.

#### closeButtonHtml
- **type**: string
- **Default**: `'&times;'`
- **Description**: Use this to change the content of the close button.

#### closeButtonAriaLabel
- **type**: string
- **Default**: `'Close this dialog'`
- **Description**: Use this to change the `aria-label` for the close button.

#### loaderHtml
- **type**: string
- **Default**: `''`
- **Description**: Use this to change the HTML content of the loader.

#### showLoaderOnConfirm
- **type**: boolean
- **Default**: `false`
- **Description**: Set to `true` to disable buttons and show the loader instead of the Confirm button. Use in combination with the `preConfirm` parameter.

#### showLoaderOnDeny
- **type**: boolean
- **Default**: `false`
- **Description**: Set to `true` to disable buttons and show the loader instead of the Deny button. Use in combination with the `preDeny` parameter.

#### scrollbarPadding
- **type**: boolean
- **Default**: `true`
- **Description**: Set to `false` to disable body padding adjustment when the page scrollbar gets hidden while the popup is shown.

#### preConfirm
- **type**: function
- **Default**: `undefined`
- **Description**: Function to execute before confirming, may be async (Promise-returning) or sync. Returned (or resolved) value can be:
  - `false` to prevent a popup from closing
  - anything else to pass that value as the `result.value` of `Swal.fire()`
  - `undefined` to keep the default `result.value`

#### preDeny
- **type**: function
- **Default**: `undefined`
- **Description**: Function to execute before denying, may be async (Promise-returning) or sync. Returned (or resolved) value can be:
  - `false` to prevent a popup from closing
  - anything else to pass that value as the `result.value` of `Swal.fire()`
  - `undefined` to keep the default `result.value`

#### returnInputValueOnDeny
- **type**: boolean
- **Default**: `false`
- **Description**: If you want to return the input value as `result.value` when denying the popup, set to `true`. Otherwise, the denying will set `result.value` to `false`.

#### imageUrl
- **type**: string
- **Default**: `undefined`
- **Description**: Add a customized icon for the popup. Should contain a string with the path or URL to the image.

#### imageWidth
- **type**: string
- **Default**: `undefined`
- **Description**: If `imageUrl` is set, you can specify `imageWidth` to describe image width. Can be in any CSS unit (`px`, `em/rem`, `%`).

#### imageHeight
- **type**: string
- **Default**: `undefined`
- **Description**: Custom image height. Can be in any CSS unit (`px`, `em/rem`, `%`).

#### imageAlt
- **type**: string
- **Default**: `''`
- **Description**: An alternative text for the custom image icon.

#### inputLabel
- **type**: string
- **Default**: `''`
- **Description**: Input field label.

#### inputPlaceholder
- **type**: string
- **Default**: `''`
- **Description**: Input field placeholder.

#### inputValue
- **type**: any
- **Default**: `''`
- **Description**: Input field initial value. If the input type is `select`, `inputValue` will represent the selected `<option>` tag. If the input type is `checkbox`, `inputValue` will represent the `checked` state. If the input type is `email`, `number`, `tel`, `text`, or `textarea`, a Promise can be accepted as `inputValue`.

#### inputOptions
- **type**: Map | object | Promise
- **Default**: (none)
- **Description**: If `input` parameter is set to `"select"` or `"radio"`, you can provide options. Can be a Map or a plain object, with keys that represent option values and values that represent option text. You can also provide plain object or Map as values that will represent a group of options, being the label of this `<optgroup>` the key. Finally, you can also provide a Promise that resolves with one of those types.

#### inputAutoFocus
- **type**: boolean
- **Default**: `true`
- **Description**: Automatically focus the input when popup is shown. Set this parameter to `false` to disable auto-focusing.

#### inputAutoTrim
- **type**: boolean
- **Default**: `true`
- **Description**: Automatically remove whitespaces from both ends of a result string. Set this parameter to `false` to disable auto-trimming.

#### inputAttributes
- **type**: object
- **Default**: (none)
- **Description**: HTML input attributes (e.g. `min`, `max`, `autocomplete`, `accept`), that are added to the input field. Object keys will represent attribute names, object values will represent attribute values.

#### inputValidator
- **type**: function
- **Default**: `undefined`
- **Description**: Validator for input field, may be async (Promise-returning) or sync. Returned (or resolved) value can be:
  - a falsy value (`undefined`, `null`, `false`) for indicating success
  - a string value (error message) for indicating failure

#### validationMessage
- **type**: string
- **Default**: `undefined`
- **Description**: A custom validation message for default validators (email, url).
```

--------------------------------

### Import JS and CSS separately

Source: https://sweetalert2.github.io/

Allows customizing styles by importing the JS and SCSS separately.

```javascript
import Swal from 'sweetalert2/dist/sweetalert2.js'
import 'sweetalert2/src/sweetalert2.scss'
```

--------------------------------

### SweetAlert2 range input example

Source: https://sweetalert2.github.io/

Shows a range slider for age with min, max, and step attributes, and a default value of 25.

```javascript
Swal.fire({
  title: "How old are you?",
  icon: "question",
  input: "range",
  inputLabel: "Your age",
  inputAttributes: {
    min: "8",
    max: "120",
    step: "1"
  },
  inputValue: 25
});
```

--------------------------------

### Set dark theme

Source: https://sweetalert2.github.io/

Use the 'dark' theme by setting the theme parameter to 'dark'. This theme is included by default.

```javascript
Swal.fire({
  title: 'Dark theme',
  theme: 'dark'
})
```
Tokens:
Raw