ProForm
pro-formCoordinates form state with submit-reset footers, async loading, and custom footer content.
Usage
Basic usage
Inline form: comes with submit/reset footer, submit it to onFinish.
<ProForm onFinish={(values) => api.save(values)}>
<Field label="Name">
<Input placeholder="Required" />
</Field>
<Field label="Email">
<Input placeholder="including @" />
</Field>
</ProForm>Responsive Grid
columns=2 Adapt according to container width (container query, non-viewport breakpoint); use Field colSpan=full for a single field to span the entire row.
<ProForm columns={2} submitText="Save">
<Field label="name"><Input /></Field>
<Field label="Last name"><Input /></Field>
<Field label="Detailed address" colSpan="full"><Input /></Field>
</ProForm>Bottom right aligned
footerAlign=right makes the operating area stick to the right; use showReset={false} to hide the reset.
<ProForm footerAlign="right" showReset={false} submitText="Submit">
<Field label="Remarks">
<Input />
</Field>
</ProForm>When to use
Use ProForm for a persistent inline form that needs its own submit/reset footer and responsive field grid, such as an edit or settings page. It is the inline counterpart to ModalForm / DrawerForm: both integrate useForm and an automatic footer, but ProForm does not open an overlay. Use ModalForm or DrawerForm inside an overlay, Form for a bare container with a consumer-owned footer, or SearchForm for query filters.
Import
import { ProForm } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| form | FormInstance | — | useForm instance. When provided, submission calls validate() first and reset calls form.resetFields(). |
| submitText | string | locale.proForm.submit | Submit button label. |
| resetText | string | locale.proForm.reset | Reset button label. |
| showReset | boolean | true | Shows the reset button; meaningful only when form is provided. |
| columns | 1 | 2 | 3 | 1 | Field-grid columns. Counts ≥2 respond to container width and collapse to one column when narrow. Use <Field colSpan="full"> for a full row. |
| footerAlign | "left" | "right" | "left" | Footer action alignment. |
| className | string | — | Container class name |
Events
| Event | Type | Description |
|---|---|---|
| onFinish | (values: FormValues) => void | boolean | Promise<void | boolean> | Submission callback. A Promise enables button loading; rejection is absorbed so the consumer can present feedback. |
Slots
| Slot | Type | Description |
|---|---|---|
| footer | ReactNode | Customize the bottom action area (override the default submit/reset button) |
| children | ReactNode | form fields |
Example
const form = useForm({ initialValues: { name: "", email: "" } });
const name = form.register("name", { rules: [{ required: true, message: "Please enter name" }] });
const email = form.register("email", { rules: [{ pattern: /@/, message: "Email must contain @" }] });
<ProForm form={form} onFinish={async (v) => { await api.save(v); }}>
<Field label="Name" error={name.error}>
<Input value={name.value as string} onChange={name.onChange} onBlur={name.onBlur} />
</Field>
<Field label="Email" error={email.error}>
<Input value={email.value as string} onChange={email.onChange} onBlur={email.onBlur} />
</Field>
</ProForm>// Container-responsive grid; full-width fields span every column
<ProForm form={form} columns={2} submitText="Save" onFinish={() => {}}>
<Field label="First name"><Input {...bind(reg.first)} /></Field>
<Field label="Last name"><Input {...bind(reg.last)} /></Field>
<Field label="Street address" colSpan="full"><Input {...bind(reg.addr)} /></Field>
</ProForm>Usage guidelines
columnsresponds to the form container, not the viewport. Do not recreate the grid with media queries; use<Field colSpan="full">for a field spanning all columns.- Unlike ModalForm, ProForm absorbs a rejected
onFinishPromise. Present errors through consumer-owned feedback such as a toast. - Reset requires
formbecause it callsform.resetFields(). Supplyingfooterreplaces the default submit/reset controls, so custom footer actions must invoke the desired submission and reset logic.
Related
Form · ModalForm / DrawerForm · StepsForm · LoginForm · Field · SearchForm