Form Modal Example

This modal contains a form. Perfect for collecting user input without leaving the current page.

<div data-controller="modal">
  <button data-action="click->modal#open">Open Modal Form</button>

  <dialog data-modal-target="dialog">
    <article>
      <header>
        <button aria-label="Close" rel="prev" data-action="click->modal#close"></button>
        <h3>Form</h3>
      </header>

      <form action="/form">
        <label for="username_field">Username</label>
        <input type="text" id="username_field" name="username_query" placeholder="Enter username">

        <label for="email_field">Email</label>
        <input type="email" id="email_field" name="email_query" placeholder="your@email.com">

        <label for="bio_field">Bio</label>
        <textarea id="bio_field" name="bio_query" rows="3" placeholder="Tell us about yourself..."></textarea>

        <button type="submit">
          Submit
        </button>
      </form>

      <button type="button" data-action="click->modal#close">Cancel</button>
    </article>
  </dialog>
</div>