ModalForm / DrawerForm
form-dialogRuns validated forms inside modal or drawer containers with submit lifecycle handling.
Usage
Pop-up form
trigger triggers opening, and submission is successful (onFinish resolve) automatically closes.
<ModalForm
title="New employee"
trigger={<Button>New</Button>}
onFinish={async (values) => {
await api.create(values);
}}
>
<Field label="Name">
<Input placeholder="Required" />
</Field>
</ModalForm>Drawer form
DrawerForm reuses the same arrangement and slides out from the right edge, suitable for editing scenarios with many fields.
<DrawerForm
title="Edit Staff"
trigger={<Button variant="outline">Edit</Button>}
onFinish={(values) => api.update(values)}
>
<Field label="Name">
<Input />
</Field>
<Field label="Email">
<Input />
</Field>
</DrawerForm>Drawer welt direction
DrawerForm controls the welt direction through side (left / right).
<DrawerForm title="Filter" side="left" trigger={<Button variant="outline">Left drawer</Button>}>
<Field label="Keywords">
<Input />
</Field>
</DrawerForm>Custom button copy
submitText / cancelText overrides the default submit/cancel copy.
<ModalForm
title="Export report"
submitText="Export now"
cancelText="Think again"
trigger={<Button>Export</Button>}
>
<Field label="file name">
<Input placeholder="report.xlsx" />
</Field>
</ModalForm>When to use
Use ModalForm or DrawerForm for Add/Edit flows launched from a list page. ModalForm opens a centered dialog; DrawerForm opens from an edge and adds the side prop. Both compose Dialog or Drawer with validation and a submit footer. Use ProForm for an inline page form, Form for a bare container, or StepsForm for a wizard.
Import
import { ModalForm, DrawerForm } from "@hulianui/ui"Props
Public (ModalForm = FormDialogBaseProps; DrawerForm plus side on this basis):
| Name | Type | Default | Description |
|---|---|---|---|
| title * | string | — | Title (a11y label) |
| open | boolean | — | controlled switch |
| defaultOpen | boolean | — | Uncontrolled initial switch |
| form | FormInstance | — | useForm instance: If provided, it will automatically validate() before submission, but the verification will remain open. |
| submitText | string | locale.modalForm.submit | Submit button copy |
| cancelText | string | locale.modalForm.cancel | Cancel button copy |
| className | string | — | Container class name (control width, etc.) |
| side | DrawerSide | "right" | DrawerForm only: drawer welt direction |
Events
| Event | Type | Description |
|---|---|---|
| onOpenChange | (open: boolean) => void | Switch change callback |
| onFinish | (values: FormValues) => void | boolean | Promise<void | boolean> | Submit callback; return Promise → button loading; resolve (not false) automatically close; reject or return false to keep it open |
Slots
| Slot | Type | Description |
|---|---|---|
| trigger | ReactElement | Trigger element (for uncontrolled opening); can be omitted when controlled |
| children | ReactNode | form fields |
Usage guidelines
- Closing is determined by
onFinish: resolving to anything exceptfalsecloses automatically; reject or returnfalseto keep the form open. Do not also callonOpenChange(false)fromonFinish. - Only when
formis passed will it be automaticallyvalidate()before submission and will remain open if the verification fails; if the form is not passed, the verification will not be performed and the values will be handed over to onFinish directly. - Call
form.resetFields()yourself after a successful submission if fields should clear; the component does not reset them automatically.