This component is returned by useForm().
When rendered in a dialog, the submit button will not be shown where you have placed it, but will be plucked out of the dialog contents and placed at the bottom of the dialog.
One – and only one<SubmitButton /> is required as a direct child of <Form />.

Example

form-dialog.tsx
import React from "react";
import { Forms, useForm, showToast } from "attio/client";

export function FormTextInputDialog() {
	const { Form, SubmitButton, TextInput } = useForm(
		{
			name: Forms.string(),
		},
		{
			name: "",
		},
	);
	return (
		<Form
			onSubmit={async (values) => {
				await showToast({
					title: "Form submitted",
					variant: "success",
					text: JSON.stringify(values),
				});
			}}
		>
			<TextInput label="Name" name="name" />
			<SubmitButton label="Submit" />
		</Form>
	);
}

Props

label
string
required
The label of the submit button.
disabled
boolean
Whether or not the submit button should be disabled.
It will automatically be disabled while the form is being submitted.You do not need to manage that state!