This is the legacy documentation of Project-level Custom Applications, which is in maintenance mode. Visit the new documentation for Org-level Custom Applications.


Form Dialog


Form dialogs are controlled components used to render a form or something that requires user input. They are very similar to Confirmation dialogs but semantically they fulfill a different role.


import { FormDialog } from '@commercetools-frontend/application-components';
title="Lorem ipsus"
<Spacings.Stack scale="m">
<Text.Body>{'Lorem ipsus ...'}</Text.Body>
<Text.Body>{'Lorem ipsus ...'}</Text.Body>


titlestring--The title of the Form Dialog.
isOpenboolean--Indicates whether the dialog is open or closed. The parent component needs to manage this state.
onClosefunction---Called when the dialog closes: click on overlay, click on close button, press ESC. If the function is not provided, the modal cannot be closed by any of the listed options.
childrennode--Content rendered within the dialog. If the content is long in height (depending on the screen size) a scrollbar will appear.
sizestringm, l, scalelHorizontal width limit of the dialog card.
zIndexnumber-1000The z-index value to be applied to the overlay container. It is useful if you have stacking modals.
labelSecondarystring | Intl message-CancelThe label for the secondary button as a string, or as an Intl message ({ id, defaultMessage }). See Static properties.
labelPrimarystring | Intl message-ConfirmThe label for the primary button as a string, or as an Intl message ({ id, defaultMessage }). See Static properties.
onSecondaryButtonClickfunction--Called when the secondary button is clicked.
onPrimaryButtonClickfunction--Called when the primary button is clicked.
isPrimaryButtonDisabledboolean--falseIndicates whether the primary button is disabled or not.
dataAttributesSecondaryButtonobject---Use this prop to pass data- attributes to the secondary button.
dataAttributesPrimaryButtonobject---Use this prop to pass data- attributes to the primary button.
getParentSelectorfunction---The function should return an HTML element that will be used as the parent container to hold the modal DOM tree. If no function is provided, it's expected that an HTML element with the id="parent-container" is present in the DOM. In the NODE_ENV=test environment, the default HTML element is body.

Static properties


This is a convenience proxy export to expose pre-defined Intl messages defined in the @commercetools-frontend/i18n package. The Intl messages can be used for button labels.

// other props...