High performance Form component with data scope management. Including data collection, verification, and styles.
High performance Form component with data scope management. Including data collection, verification, and styles.
import { Form } from '@lobehub/ui';| Property | Description | Type | Default |
|---|---|---|---|
| colon | Configure the default value of colon for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal) | boolean | true |
| disabled | Set form component disable, only available for antd components | boolean | false |
| component | Set the Form rendering element. Do not create a DOM node for false | ComponentType | false | form |
| fields | Control of form fields through state management (such as redux). Not recommended for non-strong demand. View example | FieldData[] | - |
| form | Form control instance created by Form.useForm(). Automatically created when not provided | FormInstance | - |
| feedbackIcons | Can be passed custom icons while Form.Item element has hasFeedback | FeedbackIcons | - |
| initialValues | Set value by Form initialization or reset | object | - |
| labelAlign | The text align of label of all items | left | right | right |
| labelWrap | whether label can be wrap | boolean | false |
| labelCol | Label layout, like <Col> component. Set span offset value like {span: 3, offset: 12} or sm: {span: 3, offset: 12} | object | - |
| layout | Form layout | horizontal | vertical | inline | horizontal |
| name | Form name. Will be the prefix of Field id | string | - |
| preserve | Keep field value even when field removed. You can get the preserve field value by getFieldsValue(true) | boolean | true |
| requiredMark | Required mark style. Can use required mark or optional mark. You can not config to single Form.Item since this is a Form level config | boolean | optional | ((label: ReactNode, info: { required: boolean }) => ReactNode) | true |
| scrollToFirstError | Auto scroll to first failed field when submit | boolean | Options | { focus: boolean } | false |
| size | Set field component size (antd components only) | small | middle | large | - |
| validateMessages | Validation prompt template, description see below | ValidateMessages | - |
| validateTrigger | Config field validate trigger | string | string[] | onChange |
| variant | Variant of components inside form | outlined | borderless | filled | outlined |
| wrapperCol | The layout for input controls, same as labelCol | object | - |
| onFieldsChange | Trigger when field updated | function(changedFields, allFields) | - |
| onFinish | Trigger after submitting the form and verifying data successfully | function(values) | - |
| onFinishFailed | Trigger after submitting the form and verifying data failed | function({ values, errorFields, outOfDate }) | - |
| onValuesChange | Trigger when value updated | function(changedValues, allValues) | - |
| clearOnDestroy | Clear form values when the form is uninstalled | boolean | false |
| gap | The gap between Form.Item label and content | number | - |
| itemMinWidth | The min width of Form.Item | number | - |
| variant | Variant of components inside form | default | block | ghost | pure | default |
| itemsType | The type of items in the form. default is the default type, flat is the flat type. | group | flat | group |
| footer | The footer of the form | ReactNode | - |
| collapsible | Whether the form is collapsible | boolean | true |
| activeKey | Key of the active panel | (string|number)[] | - |
| defaultActiveKey | Key of the initial active panel | (string|number)[] | - |
| onCollapse | Callback function executed when active panel is changed | (activeKeys:(string|number)[]) => void | - |
| Property | Description | Type | Default |
|---|---|---|---|
| key | Key of the group | string|number | - |
| title | Title of the group | ReactNode | - |
| children | Items in the group | ReactNode | - |
| icon | Icon of the group | LucideIcon | - |
| defaultActive | Whether the group is default active | boolean | true |
| extra | Extra content of the group | ReactNode | - |
| collapsible | Whether the group is collapsible | boolean | true |
| Property | Description | Type | Default |
|---|---|---|---|
| avatar | Avatar of the item | ReactNode | - |
| desc | Description of the item | ReactNode | - |
| divider | Whether to show divider | boolean | true |
| hidden | Whether to hide the item | boolean | false |
| minWidth | The min width of the item | number | itemMinWidth |
| tag | Tag of the item | ReactNode | - |
| colon | Used with label, whether to display : after label text. | boolean | true |
| dependencies | Set the dependency field. See below | NamePath[] | - |
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time | ReactNode | - |
| getValueFromEvent | Specify how to get value from event or other onChange arguments | (..args: any[]) => any | - |
| getValueProps | Additional props with sub component (It's not recommended to generate dynamic function prop by getValueProps. Please pass it to child component directly) | (value: any) => Record<string, any> | - |
| hasFeedback | Used with validateStatus, this option specifies the validation status icon. Recommended to be used only with Input. Also, It can get feedback icons via icons prop. | boolean | { icons: FeedbackIcons } | false |
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | ReactNode | - |
| hidden | Whether to hide Form.Item (still collect and validate value) | boolean | false |
| htmlFor | Set sub label htmlFor | string | - |
| initialValue | Config sub default value. Form initialValues get higher priority when conflict | string | - |
| label | Label text. When there is no need for a label but it needs to be aligned with a colon, it can be set to null | ReactNode | - |
| labelAlign | The text align of label, | left | right | right |
| labelCol | The layout of label. You can set span offset to something like {span: 3, offset: 12} or sm: {span: 3, offset: 12} same as with <Col>. You can set labelCol on Form which will not affect nest Item. If both exists, use Item first | object | - |
| messageVariables | The default validate field info, description see below | Record<string, string> | - |
| name | Field name, support array | NamePath | - |
| normalize | Normalize value from component value before passing to Form instance. Do not support async | (value, prevValue, prevValues) => any | - |
| noStyle | No style for true, used as a pure field control. Will inherit parent Form.Item validateStatus if self validateStatus not configured | boolean | false |
| preserve | Keep field value even when field removed | boolean | true |
| required | Display required style. It will be generated by the validation rule | boolean | false |
| rules | Rules for field validation. Click here to see an example | Rule[] | - |
| shouldUpdate | Custom field update logic. See below | boolean | (prevValue, curValue) => boolean | false |
| tooltip | Config tooltip info | ReactNode | TooltipProps & { icon: ReactNode } | - |
| trigger | When to collect the value of children node. Click here to see an example | string | onChange |
| validateDebounce | Delay milliseconds to start validation | number | - |
| validateFirst | Whether stop validate on first rule of error for this field. Will parallel validate when parallel configured | boolean | parallel | false |
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: success warning error validating | string | - |
| validateTrigger | When to validate the value of children node | string | string[] | onChange |
| valuePropName | Props of children node, for example, the prop of Switch or Checkbox is checked. This prop is an encapsulation of getValueProps, which will be invalid after customizing getValueProps | string | value |
| wrapperCol | The layout for input controls, same as labelCol. You can set wrapperCol on Form which will not affect nest Item. If both exists, use Item first | object | - |
| layout | Form item layout | horizontal | vertical | - |