JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/5.0.7/sweetalert2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/5.0.7/sweetalert2.css">
JavaScript
// inputOptions can be an object or Promise
var inputOptions = new Promise(function(resolve) {
resolve({
'#ff0000': 'Red',
'#00ff00': 'Green',
'#0000ff': 'Blue'
});
});
swal({
title: 'Select color',
input: 'radio',
inputOptions: inputOptions,
inputValidator: function(result) {
return new Promise(function(resolve, reject) {
if (result) {
resolve();
} else {
reject('You need to select something!');
}
});
}
}).then(function(result) {
swal({
type: 'success',
html: 'You selected: ' + result
});
})
$("input[name='swal2-radio']").on("click", function() {
var id = $('input[name=swal2-radio]:checked').val();
console.log('id: ' + id);
});