Skip to main content
This component is returned by useForm().

​
Example: Conditional fields

<WithState /> allows you to access the form values via render props in the JSX, so you can conditionally render fields.
conditional-fields-dialog.tsx
import React from "react"
import {Forms, useForm, showToast} from "attio/client"

export function HelloWorldDialog() {
  const {Form, SubmitButton, Checkbox, TextInput, WithState} = useForm(
    {
      requireName: Forms.boolean(),
      name: Forms.string(),
    },
    {
      requireName: false,
      name: "",
    }
  )
  return (
    <Form
      onSubmit={async (values) => {
        await showToast({
          title: "Form submitted",
          variant: "success",
          text: JSON.stringify(values),
        })
      }}
    >
      <Checkbox label="Require name" name="requireName" />
      <WithState values>
        {({values}) => (values.requireName ? <TextInput label="Name" name="name" /> : <></>)}
      </WithState>
      <SubmitButton label="Submit" />
    </Form>
  )
}

​
Example: Submitting state

<WithState /> allows you to know whether or not the form is currently being submitted, so you can change the UI, e.g. disabling a secondary button.
submitting-state-dialog.tsx
import React from "react"
import {Forms, useForm, showToast, Button} from "attio/client"

export function SubmittingStateDialog() {
  const {Form, SubmitButton, TextInput, WithState} = useForm(
    {
      name: Forms.string(),
    },
    {
      name: "",
    }
  )
  return (
    <Form
      onSubmit={async (values) => {
        await new Promise((resolve) => setTimeout(resolve, 2_000))
        await showToast({
          title: "Form submitted",
          variant: "success",
          text: JSON.stringify(values),
        })
      }}
    >
      <TextInput label="Name" name="name" />

      <WithState submitting>
        {({submitting}) => (
          <Button
            label="Remove"
            variant="destructive"
            disabled={submitting}
            onClick={() => {
              // do something
            }}
          />
        )}
      </WithState>
      <SubmitButton label="Submit" />
    </Form>
  )
}

​
Props

​
errors
boolean
Whether or not to request the form validation errors.Defaults to false.If true, the errors will be passed to the children render prop.
​
submitting
boolean
Whether or not to request whether the form is currently being submitted.Defaults to false.If true, the submitting will be passed to the children render prop.
​
values
boolean
Whether or not to request the form values.Defaults to false.If true, the values will be passed to the children render prop.
​
children
({ errors, submitting, values }) => React.ReactNode
A render prop that receives the requested form state.

​
errors? : Object

An object of form validation errors in the same shape as your form values.

​
submitting? : boolean

true until the Promise resolves from onSubmit, false otherwise.

​
values? : Object

The current values of your form.