Form

Layout, validation and state for a set of fields, with each field's label and error message linked by its name.

Basic

A sign-in form: each Form.Item takes a name and rules, and onFinish receives the values once every rule passes.

Layout

Set layout to horizontal, vertical or inline to place labels beside, above or in a row with their controls.

Per-item layout

Pass layout="vertical" to a single Form.Item to stack one field, like a long description, inside a horizontal form.

Size

Set size on the Form to resize every control inside it at once: small, medium or large.

Variant

Set variant on the Form to give every control the same style: outlined, filled, borderless or underlined.

Disabled

Set disabled on the Form to disable every control inside it at once, instead of passing it to each field.

Required mark

Set requiredMark to show the default asterisk, mark optional fields instead, hide the marks, or render your own with a function.

Validation rules

Stack rules on a Form.Item (required, length, pattern, number range), with warningOnly for a soft warning and validateDebounce to wait for a pause.

Field dependencies

Use dependencies and a function rule that reads getFieldValue to check one field against another, like a password confirmation.

Repeated fields

Use Form.List to render a repeatable group of fields, with add and remove for rows of environment variables.

Nested values

Pass an array to name, like ["user", "email"], to collect nested values, and validateMessages to word every error message once.

Submit when valid

Call validateFields({ validateOnly: true }) on each change to enable Submit once the form is valid, without showing errors early.

Grouped controls

Nest Form.Items with noStyle inside one labeled item to validate several controls, like city and street, as a single field.

Inside a modal

Put the Form inside a Modal and call form.validateFields() from onOk, so the dialog closes only once the values are valid.

Feedback icons

Set hasFeedback with validateStatus to show a success, warning, error or validating icon from your icon pack inside the control.

In context

The component inside real screens, with the components it usually sits beside.

Workspace settings

A settings card that uses Form.useWatch to enable Save and Cancel only after a value changes, with a Popconfirm guarding delete.

API Reference

Form
Form's props. Rows marked antuikit in the Version column are added by the kit.
Form.Item
Form.Item's props.
Form.List
Form.List's props.
Form.ErrorList
Form.ErrorList's props.
Form.Provider
Form.Provider's props.
FormInstance
FormInstance's methods.