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

<%= render "govuk_publishing_components/components/button", {
  text: "Open modal with form",
  data_attributes: {
    toggle: "modal",
    target: "modal-with-form"
  }
} %>
<%= 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 %>