Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
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 %}