Bolt Design System

Dialog Form Usage

A form dialog is best suited for presenting content restriction message or account creation/registration.

Important Notes:

Utilize all the dialog areas to create the best experience: header, body, and footer. Header and footer can become sticky when the body gets too tall.

Render the form inside the body. The <form> element must have an id.

Render form controls inside the footer. Each <button> element must have the form attribute set to the id of the <form> element.

Demo

Twig

{% set header_content %}
  {% include '@bolt-components-headline/headline.twig' with {
    text: 'Get the Report',
    size: 'xlarge'
  } only %}
  {% include '@bolt-components-headline/text.twig' with {
    text: '(all fields are required)',
    size: 'small'
  } only %}
{% endset %}

{% set body_content %}
  <form id="form-uuid-123">
    {# form elements #}
  </form>
{% endset %}

{% set footer_content %}
  {% set icon_download %}
    {% include '@bolt-elements-icon/icon.twig' with {
      name: 'download',
    } only %}
  {% endset %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'Download Now',
    icon_before: icon_download,
    display: 'block',
    attributes: {
      type: 'submit',
      form: 'form-uuid-123',
    },
  } only %}
{% endset %}

{% set dialog_content %}
  {% include '@bolt-components-dialog/dialog-header.twig' with {
    content: header_content,
  } only %}
  {% include '@bolt-components-dialog/dialog-body.twig' with {
    content: body_content,
  } only %}
  {% include '@bolt-components-dialog/dialog-footer.twig' with {
    content: footer_content,
  } only %}
{% endset %}

{% include '@bolt-components-dialog/dialog.twig' with {
  content: dialog_content,
  attributes: {
    id: 'dialog-form'
  },
} only %}

HTML

Not available in plain HTML. Please use Twig.