Dialog

Source@react-form-builder/components-mantine

Introduction

The Dialog component creates modal overlay windows that prompt users to make decisions, enter information, or acknowledge important messages. Dialogs are essential for creating focused user interactions without navigating away from the current context. The component uses Mantine Modal with proper overlay, transitions, and accessibility features.

The Dialog component is based on Mantine Modal. It is included within the following NPM package: @react-form-builder/components-mantine.

The Dialog component can be configured to create various dialog types including alerts, confirmations, forms, and custom content displays. It can be styled and customized to fit specific design and functionality requirements by using various properties that are presented and described below.

Main properties

The following general properties are available within the Main tab:

Name	Type	Description
Title	string	The title displayed in the dialog header
Description	string	Optional description text displayed under the title
Children	node	The main content of the dialog
Show close button	boolean	If true, shows the close button in the header (default: true)
With overlay	boolean	If true, shows the backdrop overlay (default: true)
Centered	boolean	If true, centers the modal vertically
Close on click outside	boolean	If true, clicking outside closes the dialog (default: true)
Close on escape	boolean	If true, pressing Escape closes the dialog (default: true)
Full screen	boolean	If true, the dialog is full screen
Size	string	Width of the modal (e.g. 'sm', 'md', 'lg', or CSS value)
Lock scroll	boolean	If true, locks body scroll when open (default: true)
Trap focus	boolean	If true, traps focus inside the modal (default: true)
Return focus	boolean	If true, returns focus to the trigger on close (default: true)
Keep mounted	boolean	If true, keeps the modal in the DOM when closed (default: false)
Within portal	boolean	If true, renders the modal in a portal (default: true)
On opened change	event	Fired when the open state changes

At the bottom of the Main properties menu, you can find additional options:

• Render When: Provides conditional rendering for your component as described in the corresponding chapter.
• HTML attributes: Allows you to provide custom HTML attributes for your form.

Style properties

These are properties that allow to customize the size, color and other style properties of your component:

• For Device: You can provide component's style customization for all devices or specific devices by using this dropdown list. Refer to Adaptive Layout for more details.

• Component > Class Name: Add a class name for your component for the subsequent styling if necessary.

• Wrapper: The options below enable you to tailor the appearance of your component and customize it for a specific device type, as selected in the For Device property:

  Name	Type	Description
  Width	number	Specifies the width for your component
  Height	number	Specifies the height for your component
  Margin top/right/bottom/left	number	Margin values for you component
  Color	string	Allows customizing the text color
  Background color	string	Enables customizing the background color