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

​
Example

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

export function RecordForm() {
  const {Form, SubmitButton, AttioRecordCombobox} = useForm(
    {
      person: Forms.attioRecord().object({slug: "people"}),
      company: Forms.attioRecord().object({slug: "companies"}),
      record: Forms.attioRecord(),
    },
    {}
  )
  return (
    <Form
      onSubmit={async (values) => {
        await showToast({
          title: "Form submitted",
          variant: "success",
          text: `Selected person: ${values.person?.recordId} (${values.person?.object}), company: ${values.company?.recordId} (${values.company?.object}), record: ${values.record?.recordId} (${values.record?.object.slug})`,
        })
      }}
    >
      <AttioRecordCombobox label="Person" name="person" object="people" />
      <AttioRecordCombobox label="Company" name="company" object="companies" />
      <AttioRecordCombobox label="Record" name="record" />
      <SubmitButton label="Submit" />
    </Form>
  )
}

​
Props

​
label
string
required
The label of the Attio record combobox input field.
​
name
string
required
The path to the attioRecord value of the input field in your form schema. e.g. "company", "appointment.contact_person"
​
object
ObjectSlug | Array<ObjectSlug>
Specifies which type(s) of records to load in the combobox, including custom objects.Defaults to ["companies", "people", "deals", "users"].
​
disabled
boolean
Whether or not the field should be disabled.Defaults to false (not disabled).