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 })}
  />