

<Tabs items="[&#x22;Preview&#x22;, &#x22;Code&#x22;]">
  <Tab value="Preview">
    <Preview name="SingleExternalSubmitExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    "use client";

    import { Button } from "@tilt-legal/cubitt-components/primitives";
    import { z } from "zod";
    import { FormBuilder } from "@tilt-legal/cubitt-components/composites";

    const schema = z.object({
      name: z.string().min(1, "Required"),
    });

    const formDefs = [
      {
        kind: "field",
        name: "name",
        label: "Name",
        component: "text",
        size: "full",
      },
    ] as const satisfies FormDefs;

    export default function ExternalSubmitForm() {
      const formId = "my-form";

      return (
        <div className="space-y-4">
          <FormBuilder.Single
            id={formId}
            schema={schema}
            formDefs={formDefs}
            defaultValues={{ name: "" }}
            onSubmit={async (values) => console.log(values)}
          />

          <Button type="submit" form={formId}>
            Submit
          </Button>
        </div>
      );
    }
    ```
  </Tab>
</Tabs>

## How It Works [#how-it-works]

1. **Pass an `id` prop** – Assigns the ID to the underlying `<form>` element
2. **Connect external button** – Use `<Button form={id} type="submit">` anywhere on the page
3. **Auto-hide built-in button** – When `id` is provided without `submitLabel`, the default button is hidden

You can also use `submitRef` for imperative control:

```tsx
const submitRef = useRef<() => void>(null);

<FormBuilder.Single submitRef={submitRef} ... />

<Button onClick={() => submitRef.current?.()}>Submit</Button>
```

<Callout type="info">
  See the full [API Reference](/composites/form-builder/single#api-reference)
  for `id`, `submitRef`, and `submitLabel` props.
</Callout>
