Skip to main content

Introducing Workflow Engine, try for FREE workflowengine.io.

RsModal

Introduction

The RsModal component displays modal dialog box component for message prompts, acknowledgement messages, and submissions. This component is hidden in the Designer on the component palette and have to be specified in the form settings.

Modal type settings

This component is a part of @react-form-builder/components-rsuite.

Main properties

The following general properties are available within the Main tab:

NameTypeDescription
Auto focusbooleanWhen set to true, the Modal is opened and is automatically focused on its own, accessible to screen readers
BackdropbooleanWhen set to true, the Modal will display the background when it is opened. Clicking on the background will close the Modal
Backdrop classNamestringAdd an optional extra class name to .modal-backdrop It could end up looking like class="modal-backdrop foo-modal-backdrop in"
CSS class prefixstringThe prefix of the component CSS class
CSS class for dialogstringCSS class applied to Dialog DOM nodes
Enforce focusbooleanWhen set to true, Modal will prevent the focus from leaving when opened, making it easier for the secondary screen reader to access
Close by EscbooleanClose Modal when Esc key is pressed
OverflowbooleanAutomatically sets the height when the body content is too long
SizechoiseDetermine the width of the modal (i.e., Extra small, Small, Medium, Large, or Full)
Stay in the know
Quickly Build Drag-and-Drop Forms
Star us on GitHub