How to add HTML input to a sweet alert?

Question

I am trying to add a switch to a dialog using a sweet warning, but I cannot do this. Below 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"); } }); 

Answer 1

The default slide style sheet hides all input fields in alerts, so you need to restore the initial values:

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

Answer 2

SweetAlert2 supports radio inputs out of the box: https://limonte.imtqy.com/sweetalert2/#radio-inputs

 swal({ title: 'Select color', input: 'radio', inputOptions: { '#ff0000': 'Red', '#00ff00': 'Green', '#0000ff': 'Blue' }, // validator is optional inputValidator: function(result) { return new Promise(function(resolve, reject) { if (result) { resolve(); } else { reject('You need to select something!'); } }); } }).then(function(result) { if (result) { swal({ type: 'success', html: 'You selected: ' + result }); } })