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

Answer 1

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