urlscan.io logo urlscan.io
SecurityTrails logo

sweetalert2.github.io Open in urlscan Pro
185.199.108.153  Public Scan

Back to summary
Submitted URL: http://sweetalert2.github.io/
Effective URL: https://sweetalert2.github.io/
Submission: On February 09 via api from US — Scanned from DE

Form analysis 47 forms found in the DOM

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

POST https://codepen.io/pen/define

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"></form>

Text Content

ExamplesRecipe GalleryInstallationUsageIntegrationsConfiguration
ParamsDeclarative TemplatesHandling ButtonsHandling DismissalsIconsInput
TypesMethodsThemesSponsorsNSFW Sponsors
Theme: DefaultDarkBootstrap 4BulmaMinimalBorderlessMaterial UIWordPress Admin
SAVE LIVES, SUPPORT UKRAINE 🇺🇦

Current version: v11.10.5
Latest update: 4 days ago
Downloads last month: 2,658,628
SearchK


A BEAUTIFUL, RESPONSIVE, CUSTOMIZABLE, ACCESSIBLE (WAI-ARIA) REPLACEMENT FOR
JAVASCRIPT'S POPUP BOXES


ZERO DEPENDENCIES

Normal alert
Show normal alert

alert("You clicked the button!");



Show success message

Swal.fire({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success"
});



Get $200 in free credits with DigitalOcean!


EXAMPLES

 * A basic message
   
   Try me!
   
   Swal.fire("SweetAlert2 is working!");
   
   

 * A title with a text under
   
   Try me!
   
   Swal.fire({
     title: "The Internet?",
     text: "That thing is still around?",
     icon: "question"
   });
   
   

 * A modal with a title, an error icon, a text, and a footer
   
   Try me!
   
   Swal.fire({
     icon: "error",
     title: "Oops...",
     text: "Something went wrong!",
     footer: '<a href="#">Why do I have this issue?</a>'
   });
   
   

 * A modal window with a long content inside:
   
   Try me!
   
   Swal.fire({
     imageUrl: "https://placeholder.pics/svg/300x1500",
     imageHeight: 1500,
     imageAlt: "A tall image"
   });
   
   

 * Custom HTML description and buttons with ARIA labels
   
   Try me!
   
   Swal.fire({
     title: "<strong>HTML <u>example</u></strong>",
     icon: "info",
     html: `
       You can use <b>bold text</b>,
       <a href="#">links</a>,
       and other HTML tags
     `,
     showCloseButton: true,
     showCancelButton: true,
     focusConfirm: false,
     confirmButtonText: `
       <i class="fa fa-thumbs-up"></i> Great!
     `,
     confirmButtonAriaLabel: "Thumbs up, great!",
     cancelButtonText: `
       <i class="fa fa-thumbs-down"></i>
     `,
     cancelButtonAriaLabel: "Thumbs down"
   });
   
   

 * A dialog with three buttons
   
   Try me!
   
   Swal.fire({
     title: "Do you want to save the changes?",
     showDenyButton: true,
     showCancelButton: true,
     confirmButtonText: "Save",
     denyButtonText: `Don't save`
   }).then((result) => {
     /* Read more about isConfirmed, isDenied below */
     if (result.isConfirmed) {
       Swal.fire("Saved!", "", "success");
     } else if (result.isDenied) {
       Swal.fire("Changes are not saved", "", "info");
     }
   });
   
   

 * A custom positioned dialog
   
   Try me!
   
   Swal.fire({
     position: "top-end",
     icon: "success",
     title: "Your work has been saved",
     showConfirmButton: false,
     timer: 1500
   });
   
   

 * Custom animation with Animate.css
   
   Try me!
   
   Swal.fire({
     title: "Custom animation with Animate.css",
     showClass: {
       popup: `
         animate__animated
         animate__fadeInUp
         animate__faster
       `
     },
     hideClass: {
       popup: `
         animate__animated
         animate__fadeOutDown
         animate__faster
       `
     }
   });
   
   

 * A confirm dialog, with a function attached to the "Confirm"-button
   
   Try me!
   
   Swal.fire({
     title: "Are you sure?",
     text: "You won't be able to revert this!",
     icon: "warning",
     showCancelButton: true,
     confirmButtonColor: "#3085d6",
     cancelButtonColor: "#d33",
     confirmButtonText: "Yes, delete it!"
   }).then((result) => {
     if (result.isConfirmed) {
       Swal.fire({
         title: "Deleted!",
         text: "Your file has been deleted.",
         icon: "success"
       });
     }
   });
   
   

 * ... and by passing a parameter, you can execute something else for "Cancel"
   
   Try me!
   
   const swalWithBootstrapButtons = Swal.mixin({
     customClass: {
       confirmButton: "btn btn-success",
       cancelButton: "btn btn-danger"
     },
     buttonsStyling: false
   });
   swalWithBootstrapButtons.fire({
     title: "Are you sure?",
     text: "You won't be able to revert this!",
     icon: "warning",
     showCancelButton: true,
     confirmButtonText: "Yes, delete it!",
     cancelButtonText: "No, cancel!",
     reverseButtons: true
   }).then((result) => {
     if (result.isConfirmed) {
       swalWithBootstrapButtons.fire({
         title: "Deleted!",
         text: "Your file has been deleted.",
         icon: "success"
       });
     } else if (
       /* Read more about handling dismissals below */
       result.dismiss === Swal.DismissReason.cancel
     ) {
       swalWithBootstrapButtons.fire({
         title: "Cancelled",
         text: "Your imaginary file is safe :)",
         icon: "error"
       });
     }
   });
   
   

 * A message with a custom image
   
   Try me!
   
   Swal.fire({
     title: "Sweet!",
     text: "Modal with a custom image.",
     imageUrl: "https://unsplash.it/400/200",
     imageWidth: 400,
     imageHeight: 200,
     imageAlt: "Custom image"
   });
   
   

 * A message with custom width, padding, background and animated Nyan Cat
   
   Try me!
   
   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
     `
   });
   
   

 * A message with auto close timer
   
   Try me!
   
   let timerInterval;
   Swal.fire({
     title: "Auto close alert!",
     html: "I will close in <b></b> milliseconds.",
     timer: 2000,
     timerProgressBar: true,
     didOpen: () => {
       Swal.showLoading();
       const timer = Swal.getPopup().querySelector("b");
       timerInterval = setInterval(() => {
         timer.textContent = `${Swal.getTimerLeft()}`;
       }, 100);
     },
     willClose: () => {
       clearInterval(timerInterval);
     }
   }).then((result) => {
     /* Read more about handling dismissals below */
     if (result.dismiss === Swal.DismissReason.timer) {
       console.log("I was closed by the timer");
     }
   });
   
   

 * Right-to-left support for Arabic, Persian, Hebrew, and other RTL languages
   
   Try me!
   
   Swal.fire({
     title: "هل تريد الاستمرار؟",
     icon: "question",
     iconHtml: "ØŸ",
     confirmButtonText: "نعم",
     cancelButtonText: "لا",
     showCancelButton: true,
     showCloseButton: true
   });
   
   

 * AJAX request example
   
   Try me!
   
   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
       });
     }
   });
   
   


DOWNLOAD & INSTALL

$ npm install sweetalert2

Or grab from jsDelivr CDN

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



sweetalert2 is the 19th most popular package on jsDelivr, with 1,491,018,756 CDN
hits in the last month


USAGE

1. Import the plugin:

import Swal from 'sweetalert2'

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



It's also possible to import JS and CSS separately, e.g. if you need to
customize styles:

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



2. Call the sweetAlert2-function after the page has loaded

Swal.fire({
  title: 'Error!',
  text: 'Do you want to continue',
  icon: 'error',
  confirmButtonText: 'Cool'
})



As an old-school alternative, you can initialize the plugin by referencing the
necessary files:

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



Or with the stylesheet separately if desired:

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




INTEGRATIONS WITH MAJOR JS FRAMEWORKS

React

Vue

Angular



CONFIGURATION PARAMS

Here are the keys that you can use if you pass an object into sweetAlert2:

Argument
(Default value)Description#

TITLE


''The title of the popup, as HTML.#

TITLETEXT


''The title of the popup, as text. Useful to avoid HTML injection.#

HTML


''A HTML description for the popup.
If text and html parameters are provided in the same time,html will be used.
[Security] SweetAlert2 does NOT sanitize this parameter. It is the developer's
responsibility to escape any user input when using the html option, so XSS
attacks would be prevented.#

TEXT


''A description for the popup.
If text and html parameters are provided in the same time,html will be used.#

ICON


undefinedThe icon of the popup. SweetAlert2 comes with 5 built-in icon which
will show a corresponding icon animation: warning, error, success, info, and
question. It can either be put in the array under the key "icon" or passed as
the third parameter of the function.#

ICONCOLOR


undefinedUse this to change the color of the icon.#

ICONHTML


undefinedThe custom HTML content for an icon.#

ANIMATION


trueIf set to false, the popup animation will be disabled#

SHOWCLASS


{
  popup: 'swal2-show',
  backdrop: 'swal2-backdrop-show',
  icon: 'swal2-icon-show'
}


CSS classes for animations when showing a popup (fade in)#

HIDECLASS


{
  popup: 'swal2-hide',
  backdrop: 'swal2-backdrop-hide',
  icon: 'swal2-icon-hide'
}


CSS classes for animations when hiding a popup (fade out)#

FOOTER


''The footer of the popup. Can be either plain text or HTML.#

BACKDROP


trueWhether or not SweetAlert2 should show a full screen click-to-dismiss
backdrop. Can be either a boolean or a string which will be assigned to the CSS
background property.#

TOAST


falseWhether or not an alert should be treated as a toast notification. This
option is normally coupled with theposition parameter and a timer. Toasts are
NEVER autofocused.#

TARGET


'body'The container element for adding popup into.#

INPUT


undefinedInput field type, can be text, email, password, number, tel, range,
textarea, search, url, select, radio, checkbox, file, date, datetime-local,
time, week, month.#

WIDTH


'32em'Popup window width, including paddings (box-sizing: border-box). Can be in
any CSS unit (px, em/rem, %).#

PADDING


'0 0 1.25em'Popup window padding. Can be in any CSS unit (px, em/rem, %).#

COLOR


undefinedColor for title, content and footer (CSS color property). The default
color is '#545454'.#

BACKGROUND


undefinedPopup window background (CSS background property). The default
background is '#fff'.#

POSITION


'center'Popup window position, can be 'top', 'top-start', 'top-end', 'center',
'center-start', 'center-end', 'bottom', 'bottom-start', or 'bottom-end'.#

GROW


falsePaired with window position, sets the direction the popup should grow in,
can be set to'row', 'column', 'fullscreen', or false.#

CUSTOMCLASS


undefinedA custom CSS class for the popup:

customClass: {
  container: '...',
  popup: '...',
  header: '...',
  title: '...',
  closeButton: '...',
  icon: '...',
  image: '...',
  htmlContainer: '...',
  input: '...',
  inputLabel: '...',
  validationMessage: '...',
  actions: '...',
  confirmButton: '...',
  denyButton: '...',
  cancelButton: '...',
  loader: '...',
  footer: '....',
  timerProgressBar: '....',
}


#

TIMER


undefinedAuto 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


falseIf set to true, the timer will have a progress bar at the bottom of a
popup. Mostly, this feature is useful with toasts.#

HEIGHTAUTO


trueBy 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


trueIf 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


trueIf 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.#

ALLOWENTERKEY


trueIf set to false, the user can't confirm the popup by pressing the Enter or
Space keys, unless they manually focus the confirm button. You can also pass a
custom function returning a boolean value.#

STOPKEYDOWNPROPAGATION


trueIf set to false, SweetAlert2 will allow keydown events propagation to the
document.#

KEYDOWNLISTENERCAPTURE


falseUseful 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


trueIf set to false, a "Confirm"-button will not be shown.#

SHOWDENYBUTTON


falseIf set to true, a "Deny"-button will be shown. It can be useful when you
want a popup with 3 buttons.#

SHOWCANCELBUTTON


falseIf set to true, a "Cancel"-button will be shown, which the user can click
on to dismiss the modal.#

CONFIRMBUTTONTEXT


'OK'Use this to change the text on the "Confirm"-button.#

DENYBUTTONTEXT


'No'Use this to change the text on the "Deny"-button.#

CANCELBUTTONTEXT


'Cancel'Use this to change the text on the "Cancel"-button.#

CONFIRMBUTTONCOLOR


undefinedUse this to change the background color of the "Confirm"-button. The
default color is #3085d6#

DENYBUTTONCOLOR


undefinedUse this to change the background color of the "Deny"-button. The
default color is #dd6b55#

CANCELBUTTONCOLOR


undefinedUse this to change the background color of the "Cancel"-button. The
default color is #aaa#

CONFIRMBUTTONARIALABEL


''Use this to change the aria-label for the "Confirm"-button.#

DENYBUTTONARIALABEL


''Use this to change the aria-label for the "Deny"-button.#

CANCELBUTTONARIALABEL


''Use this to change the aria-label for the "Cancel"-button.#

BUTTONSSTYLING


trueApply default styling to buttons. If you want to use your own classes (e.g.
Bootstrap classes) set this parameter to false.#

REVERSEBUTTONS


falseSet to true if you want to invert default buttons positions
("Confirm"-button on the right side).#

FOCUSCONFIRM


trueSet to false if you want to focus the first element in tab order instead of
"Confirm"-button by default.#

RETURNFOCUS


trueSet to false if you don't want to return the focus to the element that
invoked the modal after the modal is closed.#

FOCUSDENY


falseSet to true if you want to focus the "Deny"-button by default.#

FOCUSCANCEL


falseSet to true if you want to focus the "Cancel"-button by default.#

SHOWCLOSEBUTTON


falseSet to true to show close button in top right corner of the popup.#

CLOSEBUTTONHTML


'&times;'Use this to change the content of the close button.#

CLOSEBUTTONARIALABEL


'Close this dialog'Use this to change the aria-label for the close button.#

LOADERHTML


''Use this to change the HTML content of the loader.#

SHOWLOADERONCONFIRM


falseSet to true to disable buttons and show the loader instead of the Confirm
button. Use it in combination with the preConfirm parameter.#

SHOWLOADERONDENY


falseSet to true to disable buttons and show the loader instead of the Deny
button. Use it in combination with the preDeny parameter.#

SCROLLBARPADDING


trueSet to false to disable body padding adjustment when the page scrollbar gets
hidden while the popup is shown#

PRECONFIRM


undefinedFunction 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

See usage example.#

PREDENY


undefinedFunction 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


falseIf 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


undefinedAdd a customized icon for the popup. Should contain a string with the
path or URL to the image.#

IMAGEWIDTH


undefinedIf imageUrl is set, you can specify imageWidth to describes image
width. Can be in any CSS unit (px, em/rem, %).#

IMAGEHEIGHT


undefinedCustom image height. Can be in any CSS unit (px, em/rem, %).#

IMAGEALT


''An alternative text for the custom image icon.#

INPUTLABEL


''Input field label.#

INPUTPLACEHOLDER


''Input field placeholder.#

INPUTVALUE


''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, email, number, telor textarea, a
Promise can be accepted as inputValue.#

INPUTOPTIONS


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 represented 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


trueAutomatically focus the input when popup is shown. Set this parameter to
false to disable auto-focusing.#

INPUTAUTOTRIM


trueAutomatically remove whitespaces from both ends of a result string. Set this
parameter to false to disable auto-trimming.#

INPUTATTRIBUTES


HTML input attributes (e.g. min, max, autocomplete, accept), that are added to
the input field. Object keys will represent attributes names, object values will
represent attributes values.#

INPUTVALIDATOR


undefinedValidator 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

See usage example.#

VALIDATIONMESSAGE


undefinedA custom validation message for default validators (email, url).#

PROGRESSSTEPS


[]Progress steps, useful for queues.#

CURRENTPROGRESSSTEP


undefinedCurrent active progress step.#

PROGRESSSTEPSDISTANCE


undefinedDistance between progress steps. Can be in any CSS unit (px, em/rem,
%).#

WILLOPEN


undefinedPopup lifecycle hook. Synchronously runs before the popup is shown on
screen. Provides popup DOM element as the argument. In previous versions, this
hook was named onBeforeOpen.#

DIDOPEN


undefinedPopup lifecycle hook. Asynchronously runs after the popup has been
shown on screen. Provides popup DOM element as the argument. In previous
versions, this hook was named onOpen.#

DIDRENDER


undefinedPopup lifecycle hook. Synchronously runs after the popup DOM has been
updated (ie. just before the popup is repainted on the screen).
Provides popup DOM element as the argument.
Typically, this will happen after Swal.fire() or Swal.update().
If you want to perform changes in the popup's DOM, that survive Swal.update(),
preferdidRender over willOpen.
In previous versions, this hook was named onRender.#

WILLCLOSE


undefinedPopup lifecycle hook. Synchronously runs when the popup closes by user
interaction (and not due to another popup being fired). Provides popup DOM
element as the argument. In previous versions, this hook was named onClose.#

DIDCLOSE


undefinedPopup lifecycle hook. Asynchronously runs after the popup has been
disposed by user interaction (and not due to another popup being fired). In
previous versions, this hook was named onAfterClose.#

DIDDESTROY


undefinedPopup lifecycle hook. Synchronously runs after popup has been destroyed
either by user interaction or by another popup.
If you have cleanup operations that you need to reliably execute each time a
popup is closed, preferdidDestroy over didClose.
In previous versions, this hook was named onDestroy.

You can easily reuse configuration by creating your own Swal with
Swal.mixin({...options}):

 * Mixin example
   
   Try me!
   
   const Toast = Swal.mixin({
     toast: true,
     position: "top-end",
     showConfirmButton: false,
     timer: 3000,
     timerProgressBar: true,
     didOpen: (toast) => {
       toast.onmouseenter = Swal.stopTimer;
       toast.onmouseleave = Swal.resumeTimer;
     }
   });
   Toast.fire({
     icon: "success",
     title: "Signed in successfully"
   });
   
   


DECLARATIVE TEMPLATES AND DECLARATIVE TRIGGERING

There's also the declarative way to define a popup, via the <template> tag. This
is handy when you want to define popup on server side (SSR).

 * Declarative template example
   
   Try me!
   Save changes to "Untitled 1" before closing? Save As Cancel Close without
   Saving
   
   <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>
   
   
   
   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>



And you can even trigger SweetAlert2 popups declaratively! Use the
bindClickHandler() method for that:

 * Trigger modalTrigger toast
   
   <button data-swal-template="#my-template">
     Trigger modal
   </button>
   
   <button data-swal-toast-template="#my-template">
     Trigger toast
   </button>
   
   
   
   Swal.bindClickHandler();
   /* Bind a mixin to a click handler */
   Swal.mixin({
     toast: true
   }).bindClickHandler("data-swal-toast-template");
   
   


HANDLING BUTTONS (CONFIRM, DENY, CANCEL)

When the user clicks a button, the Promise returned by Swal.fire() will be
resolved with the SweetAlertResult object:

KeyDescriptionisConfirmedThe "Confirm" button was clicked, the value will
contain the resultisDeniedThe "Deny" button was clicked, the value will be
false.
Alternatively, if there's an input in a popup, you can use
returnInputValueOnDeny: true to return the input's value.isDismissedThe "Cancel"
button was clicked, the dismiss will beSwal.DismissReason.cancelvalueThe value
from the popup, possible values:
 * true for simple confirmed dialogs
 * false for denied popups
 * any value for popups with inputs

dismissThe dismissal reason, see the Handling Dismissals section for details


HANDLING DISMISSALS

When an alert is dismissed by the user, the Promise returned by Swal.fire() will
be resolved with an object { isDismissed: true, dismiss: reason } documenting
the reason it was dismissed:

ReasonDescriptionRelated configuration

SWAL.DISMISSREASON.BACKDROP

The user clicked the backdrop.allowOutsideClick

SWAL.DISMISSREASON.CANCEL

The user clicked the cancel button.showCancelButton

SWAL.DISMISSREASON.CLOSE

The user clicked the close button.showCloseButton

SWAL.DISMISSREASON.ESC

The user clicked the Esc key.allowEscapeKey

SWAL.DISMISSREASON.TIMER

The timer ran out, and the alert closed automatically.timer

If a popup is dismissed by Swal.close() or another popup, the Promise will be
resolved with an object { isDismissed: true } (dismiss will be undefined).


ICONS

SUCCESS


Try me!

ERROR


Try me!

WARNING

!
Try me!

INFO

i
Try me!

QUESTION

?
Try me!


INPUT TYPES

TEXT

const ipAPI = "//api.ipify.org?format=json";
const response = await fetch(ipAPI);
const data = await response.json();
const inputValue = data.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}`);
}


Try me!

EMAIL

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}`);
}


Try me!

URL

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


Try me!

PASSWORD

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}`);
}


Try me!

TEXTAREA

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);
}


Try me!

SELECT

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}`);
}


Try me!

RADIO

/* 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}` });
}


Try me!

CHECKBOX

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;<i class="fa fa-arrow-right"></i>
  `,
  inputValidator: (result) => {
    return !result && "You need to agree with T&C";
  }
});
if (accept) {
  Swal.fire("You agreed with T&C :)");
}


Try me!

DATE

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);
}


Try me!

FILE

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);
}


Try me!

RANGE

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


Try me!

Multiple inputs aren't supported, you can achieve them by using html and
preConfirm parameters.
Inside the preConfirm() function you can return (or, if async, resolve with) the
custom result:

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));
}


Try me!


METHODS

MethodDescription

SWAL.ISVISIBLE()

Determine if popup is shown.

SWAL.MIXIN({ ...OPTIONS })

Returns an extended version of Swal containing params as defaults. Useful for
reusing Swal configuration.

SWAL.UPDATE({...OPTIONS})

Updates popup options.

SWAL.CLOSE()

Close the currently open SweetAlert2 popup programmatically, the Promise
returned by Swal.fire() will be resolved with an empty object { }

SWAL.GETCONTAINER()

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

SWAL.GETPOPUP()

Get the popup.

SWAL.GETTITLE()

Get the popup title.

SWAL.GETPROGRESSSTEPS()

Get the progress steps.

SWAL.GETCLOSEBUTTON()

Get the close button.

SWAL.GETICON()

Get the icon.

SWAL.GETICONCONTENT()

Get the icon content (without border).

SWAL.GETHTMLCONTAINER()

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

SWAL.GETIMAGE()

Get the image.

SWAL.GETACTIONS()

Get the actions block (buttons container).

SWAL.GETFOOTER()

Get the popup footer.

SWAL.GETFOCUSABLEELEMENTS()

Get all focusable elements in the popup.

SWAL.GETCONFIRMBUTTON()

Get the "Confirm" button.

SWAL.GETDENYBUTTON()

Get the "Deny" button.

SWAL.GETCANCELBUTTON()

Get the "Cancel" button.

SWAL.ENABLEBUTTONS()

Enable "Confirm" and "Cancel" buttons.

SWAL.DISABLEBUTTONS()

Disable "Confirm" and "Cancel" buttons.

SWAL.SHOWLOADING()

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())

SWAL.HIDELOADING()

Hides loader and shows back the button which was hidden by .showLoading()

SWAL.ISLOADING()

Determine if popup is in the loading state. Related methods: Swal.showLoading()
and Swal.hideLoading()

SWAL.GETTIMERLEFT()

Returns the time left in case when timer parameter is set.

SWAL.STOPTIMER()

Stops the timer in case when timer parameter is set. Returns the time left

SWAL.RESUMETIMER()

Resume the timer previously stopped. Returns the time left

SWAL.TOGGLETIMER()

Toggle state of the timer between stopped and running. Returns the time left

SWAL.ISTIMERRUNNING()

Returns the status of a timer: true if is running, false if it's paused

SWAL.INCREASETIMER(MS)

Increase the timer by ms milliseconds. Returns the time left

SWAL.CLICKCONFIRM()

Click the "Confirm"-button programmatically.

SWAL.CLICKDENY()

Click the "Deny"-button programmatically.

SWAL.CLICKCANCEL()

Click the "Cancel"-button programmatically.

SWAL.GETINPUT()

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

SWAL.DISABLEINPUT()

Disable input. A disabled input element is unusable and un-clickable.

SWAL.ENABLEINPUT()

Enable input.

SWAL.SHOWVALIDATIONMESSAGE(MESSAGE)

Show the validation message DOM node.

SWAL.RESETVALIDATIONMESSAGE()

Hide the validation message DOM node.

SWAL.GETVALIDATIONMESSAGE()

Get the validation message DOM node.

SWAL.ISVALIDPARAMETER(PARAM)

Determine if parameter name is valid.

SWAL.ISUPDATABLEPARAMETER(PARAM)

Determine if parameter name is valid for Swal.update() method.


THEMES




DARK



MINIMAL



BORDERLESS



BOOTSTRAP 4



BULMA



MATERIAL UI



WORDPRESS ADMIN



THEMES INSTALLATION

You can install all themes at once:

$ npm install @sweetalert2/themes

Or just a single theme @sweetalert2/theme-<theme_name>, e.g.:

$ npm install @sweetalert2/theme-dark

Or from jsdelivr CDN, e.g.:

<link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>




THEMES USAGE

With CSS:

<!-- Include a required theme -->
<link rel="stylesheet" href="@sweetalert2/themes/dark/dark.css">
<script src="sweetalert2/dist/sweetalert2.min.js"></script>



With SASS:

// your-app.js
import Swal from 'sweetalert2/src/sweetalert2.js'

// your-app.scss
@import '@sweetalert2/themes/dark/dark.scss';




SPONSORS

For all questions related to sponsorship please contact me via email
sweetalert2@gmail.com


Become a sponsor

InsaDown

DLX Plugins

Tiago de Oliveira Stutz

iStarTips

Refermate

Roboflow

ZezeLife

SERP Empire

Real Spy Apps

Metal Raised Garden Bed

Phone Tracking Apps

My Bitcoin slots


NSFW SPONSORS

For all questions related to sponsorship please contact me via email
sweetalert2@gmail.com


Become a sponsor

ChatGPT for Sex

Pocket pussy

XspaceCup - Top Male Masturbator Brand

Vlixa

TabooDude

Sexsi Toys

CheapestSexDolls

Best Blowjob
Machines

EscortSearch

NakeDoll

Ready Set Cam

hentai sex toys

Inflatable sex doll

Sex Doll Torso

porn sexdoll

cheap sex doll

BULULU

VSDoll

XNDOLL

sexdoll torso

anime sexdoll

cheap sexdoll

huge dildo

sexdoll

Cute Sex Doll

best pocket pussy

female torso sex doll

male masturbator

penis pump

BestRealDoll

SexDollTech

SexDollsOff

RealSexDoll

YourDoll

Annie's Dollhouse

My Sex Toy Guide

STC

DoctorClimax

BSDoll