A dialog with fields

<div class="demo">
  <button class="demo-btn" id="invite">Invite a teammate</button>
  <pre class="demo-out" id="out">No invitation yet</pre>
</div>

import { dialog } from 'https://devix.pk/cdn/oss/confirm-dialog@1.0.0/index.js';

const out = document.getElementById('out');

document.getElementById('invite').addEventListener('click', async () => {
  const answer = await dialog({
    title: 'Invite a teammate',
    description: 'They will get an email with a link that expires in seven days.',
    confirmText: 'Send invite',
    width: 440,
    fields: [
      { name: 'email', type: 'email', label: 'Email', required: true, placeholder: 'name@example.com', validate: (value) => (String(value).includes('@') ? undefined : 'That is not an email address') },
      { name: 'seats', type: 'number', label: 'Seats', value: 1, hint: 'Each seat is billed monthly.' },
      { name: 'note', type: 'textarea', label: 'Note', placeholder: 'Optional' },
      { name: 'admin', type: 'checkbox', label: 'Make them an admin' },
    ],
  });
  out.textContent = answer?.confirmed ? JSON.stringify(answer.values, null, 2) : 'Dismissed';
});

@import url('https://devix.pk/cdn/oss/confirm-dialog@1.0.0/confirm-dialog.min.css');