Skip to main content
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!