How to add HTML input into sweet alert?

Question

I am trying to add radio button into dialog box using sweet alert but I'm not able to do it. Following is the code:

swal({
        title: "<small>Please select an reason to cancel this job !</small>",
        type: "warning",
        text:"<input type=\"radio\" name=\"reason\" value=\"male\">Reason 1<br><input type=\"radio\" name=\"reason\" value=\"female\">Reason 2<br><input type=\"radio\" name=\"reason\" value=\"female\">Other Reason",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes",
        cancelButtonText: "No",
        closeOnConfirm: false,
        closeOnCancel: false,
        html: true
    },
            function(isConfirm){
                if (isConfirm) {
                    swal("Result !","Job cancelled successfully.");
                } else {
                    swal("Cancelled  !", "Process aborted");
                }
            });

What error are you receiving? More information is helpful when posting questions. See the [How to ask page](http://stackoverflow.com/help/how-to-ask) for help in improving your questions. — Madness, Aug 14 '15 at 15:17

Limon Monte · Answer 1 · 2021-05-16T09:55:20.490

SweetAlert2 supports radio inputs out of the box: https://sweetalert2.github.io/#input-radio

Swal.fire({
  title: 'Select color',
  input: 'radio',
  inputOptions: {
    '#ff0000': 'Red',
    '#00ff00': 'Green',
    '#0000ff': 'Blue'
  },

  // validator is optional
  inputValidator: function(result) {
    if (!result) {
      return 'You need to select something!';
    }
  }
}).then(function(result) {
  if (result.isConfirmed) {
    Swal.fire({
      icon: 'success',
      html: 'You selected: ' + result.value
    });
  }
})

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

Michał Perłakowski · Answer 2 · 2016-01-21T20:26:13.813

4

Default sweetalert's stylesheet hides all input fields in alerts, so you have to restore initial values:

.sweet-alert input {
   display: initial;
   width: auto;
   height: auto;
   margin: auto;
}

edited Jan 21 '16 at 20:26

answered Aug 14 '15 at 14:58

Michał Perłakowski

88,409
26
156
177

where i need to add this ? into my css file or sweetalert.css ? – b22 Aug 14 '15 at 15:01
It's up to you. Unless you get sweetalert.css from CDN, you can just replace the rule in `.sweet-alert input` from `display: none;` to `display: inline-block;`. – Michał Perłakowski Aug 14 '15 at 15:09
do you know about this error if yes then could you please help me out. http://stackoverflow.com/questions/32070945/facing-error-while-using-sweet-alerts-in-ie-11 – b22 Aug 18 '15 at 12:56
Still not working for `checkbox` values. They get transformed into `text` input elements. – Alvaro Feb 23 '16 at 13:14
@Alvaro cannot reproduce, could you give a link to a JS Fiddle reproducing this issue? – Michał Perłakowski Feb 23 '16 at 18:34

How to add HTML input into sweet alert?

2 Answers2