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
Parameter | Type |
---|---|
__namedParameters | SmartFormProps <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 })} />