FormModal

Usage

FormModal is a controlled component — pair open with local state and always wire onClose. Pass onSubmit plus cancelLabel / submitLabel for the create/edit shape; the organism wraps children in a real <form> and renders the action pair in the modal footer. All strings are caller-owned (i18n).

import { FormModal, Input } from '@epasslive/design-system'

const [showForm, setShowForm] = useState(false)
const [saving, setSaving] = useState(false)

<FormModal
  open={showForm}
  onClose={() => setShowForm(false)}
  title={t('formTitle')}
  onSubmit={create}
  cancelLabel={t('cancel')}
  submitLabel={t('save')}
  submitDisabled={saving}
>
  <Input label={t('codeLabel')} required />
</FormModal>

The form-attribute trick

The Modal portals its footer to document.body, past the form DOM — so the submit button cannot simply nest inside the <form>. FormModal instead gives the generated form a stable id and sets the HTML form attribute on the footer's submit button: clicking it, or pressing Enter in any field, submits the form and native validation runs — the same pattern TicketTransferModal validated (L8a composition fix). Provide a fully custom footer only when you need something the built-in pair cannot express; it overrides the generated actions.

Body-only dialogs

Children without onSubmit and without action labels render as a body-only content dialog — lists, tables, sample panels — sharing the same Modal chrome (portal, scrim, focus trap, Escape, scroll lock). Do not hand-roll a <form> inside children together with onSubmit — the organism already wraps children in a generated <form> (that would double-nest); without onSubmit a footer submit button binds no form and will not submit. For confirm/cancel-only dialogs use ConfirmModal, which owns the destructive action pair.

Accessibility

Dialog chrome comes from the Modal molecule — role="dialog", labelled by the title when set, ESC to close (topmost stacked modal only), focus trap with restore, body scroll lock. Pass title or ariaLabel so the dialog is named (WCAG 4.1.2). The action cluster exposes role="group" with actionsAriaLabel.

Props