1. Component Guide
  2. Modal dialogue (experimental)
  3. With form
Modal dialogue (experimental) example

With form

Modal dialogue with form elements inside to show how it prevents tabbing to outside the dialogue when open while preserving the tabindex on focusable elements

How it looks (preview)

How to call this example

<button class="govuk-button" data-toggle="modal" data-target="modal-with-form">Open modal with form</button>
<%= render "govuk_publishing_components/components/modal_dialogue", {
  id: "modal-with-form",
  aria_label: "Search contacts"
} do %>
  <h1 class="govuk-heading-l">Search contacts</h1>
  <label class="govuk-label govuk-visually-hidden" for="contacts">Search contacts</label>
  <div class="govuk-form-group"><input class="govuk-input" id="contacts"></div>
  <button class="govuk-button">Insert contact</button>
<% end %>