Skip to content

SmartForm

SmartForm<Schema>(__namedParameters): Element

A SmartForm wraps a Form and automatically generates form fields based on a Zod schema.

Type Parameters

Type Parameter
Schema extends ZodObject<any, UnknownKeysParam, ZodTypeAny, object, object>

Parameters

ParameterType
__namedParametersSmartFormProps<Schema>

Returns

Element

Example

import { SmartForm } from "@netlify/sdk/ui/react/components";
import { z } from "zod";
const schema = z.object({
apiKey: z.string().trim().min(1),
baseUrl: z.string().trim().url(),
stuffEnabled: z.boolean().optional(),
});
const fieldsMeta = {
apiKey: {
label: "API Key",
helpText: "Put your API key here",
secret: true,
},
baseUrl: {
label: "Base URL",
helpText: "The base URL of your API instance",
},
stuffEnabled: {
label: "Enable Stuff",
helpText: "Should we enable everything?",
},
};
<SmartForm
schema={schema}
fieldsMeta={fieldsMeta}
defaultValues={{ baseUrl: "https://www.example.com" }}
onSubmit={(fields) => console.log("Form submitted.", { fields })}
/>