/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, {}) })) : _createMdxContent(); function _createMdxContent() { const _components = Object.assign({ p: "p", code: "code", a: "a", pre: "pre" }, _provideComponents(), props.components), {Usage, Alert} = _components; if (!Alert) _missingMdxReference("Alert", true); if (!Usage) _missingMdxReference("Usage", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Wrapper around react-final-form with some extensions." }), "\n", _jsxs(_components.p, { children: ["final-form expects a function as a child which you then render a ", _jsx(_components.code, { children: "

" }), " element with and pass through\nhandleSubmit. Most the time this is the same thing, so you optionally just pass through renderable\nchildren and the form will be created implicitly for you."] }), "\n", _jsxs(Usage, { children: [_jsxs(_components.p, { children: ["Basic usage requires passing through ", _jsx(_components.code, { children: "onSubmit" }), " and then the children to render. Under the hood the\nchildren will be wrapped by ", _jsx(_components.code, { children: "formComponent" }), " that is returned by ", _jsx(_components.a, { href: "/docs/ui/useUi", children: "useUi" }), " or ", _jsx(_components.code, { children: "form" }), " if none\nspecified. You can use ", _jsx(_components.code, { children: "formProps" }), " to pass extra props through to the ", _jsx(_components.code, { children: "formComponent" }), "."] }), _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: " console.log(data)}\n formProps={{ id: 'my-form' }}\n>\n \n \n \n\n" }) }), _jsx(_components.p, { children: "You can pass a function to children in which case you are responsible for rendering the wrapper:" }), _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "function Example() {\n const { formComponent: FormComponent = 'form' } = useUi();\n\n return (\n \n );\n}\n" }) }), _jsxs(Alert, { children: [_jsxs(_components.p, { children: ["Your app must be wrapped in ", _jsx(_components.a, { href: "/docs/ui/UiProvider", children: "UiProvider" }), " for it to work. This is used to determine\nwhat components to use for ", _jsx(_components.code, { children: "Form" }), " and ", _jsx(_components.a, { href: "/docs/final-form/FormItem", children: "Form.Item" }), "."] }), _jsxs(_components.p, { children: ["See also ", _jsx(_components.a, { href: "/docs/ui-antd/AntdUiProvider", children: "AntdUiProvider" }), " for use with ", _jsx(_components.a, { href: "https://ant.design", children: "ant design" }), "."] })] })] })] }); } } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

	Prop	Type	Description
*	props An object with the properties below
	props.formProps	FormComponentProps
	...	any	Any properties from FormProps

On this page

Component Props: