> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# useForm()

> A hook for creating forms inside your Attio app.

<Note>All of the input components are returned from `useForm()`.</Note>

## Example

```tsx theme={"system"}
const {
  Form,
  TextInput,
  TextArea,
  NumberInput,
  RichTextInput,
  Checkbox,
  Toggle,
  DateTimeInput,
  PlainDateInput,
  Combobox,
  AttioUserCombobox,
  AttioRecordCombobox,
  InputGroup,
  SubmitButton,
} = useForm(
  {
    // Text inputs
    textField: Forms.string(),
    descriptionField: Forms.string(),
    emailField: Forms.string(),
    passwordField: Forms.string(),
    telField: Forms.string(),
    urlField: Forms.string(),
    // Number input
    numberField: Forms.number(),
    // Rich text
    richTextField: Forms.string(),
    // Boolean inputs
    checkboxField: Forms.boolean(),
    toggleField: Forms.boolean(),
    // Date inputs
    dateTimeField: Forms.dateTime(),
    plainDateField: Forms.plainDate(),
    // Comboboxes
    plainComboboxField: Forms.string(),
    // User combobox
    userComboboxField: Forms.string(),
    // Record combobox
    recordComboboxField: Forms.attioRecord(),
  },
  {}, // initial values
)

return (
  <Form
    onSubmit={async (values) => {
      await showToast({
        title: "Form submitted",
        variant: "success",
        text: JSON.stringify(values, null, 2),
      })
      hideDialog()
    }}
  >
    <InputGroup>
      <TextInput label="Text Input" name="textField" placeholder="Enter text" />
      <TextArea
        label="Description"
        name="descriptionField"
        placeholder="Enter description"
        resizable
      />
      <TextInput type="email" label="Email Input" name="emailField" placeholder="Enter email" />
      <TextInput
        type="password"
        label="Password Input"
        name="passwordField"
        placeholder="Enter password"
      />
    </InputGroup>

    <InputGroup>
      <TextInput
        type="tel"
        label="Telephone Input"
        name="telField"
        placeholder="Enter phone number"
      />
      <TextInput type="url" label="URL Input" name="urlField" placeholder="Enter URL" />
      <NumberInput label="Number Input" name="numberField" placeholder="Enter a number" />
    </InputGroup>

    <InputGroup>
      <RichTextInput label="Rich Text Input" name="richTextField" placeholder="Enter rich text" />
    </InputGroup>

    <InputGroup>
      <Checkbox label="Checkbox" name="checkboxField" />
      <Toggle label="Toggle" name="toggleField" />
    </InputGroup>

    <InputGroup>
      <DateTimeInput
        label="Date Time Input"
        name="dateTimeField"
        placeholder="Select date and time"
      />
      <PlainDateInput label="Plain Date Input" name="plainDateField" placeholder="Select date" />
    </InputGroup>

    <InputGroup>
      <Combobox
        label="Plain Combobox"
        name="plainComboboxField"
        options={cities}
        placeholder="Select a city"
      />
    </InputGroup>

    <InputGroup>
      <AttioUserCombobox
        label="User Combobox"
        name="userComboboxField"
        placeholder="Select a user"
      />
      <AttioRecordCombobox
        label="Record Combobox"
        name="recordComboboxField"
        placeholder="Select a record"
      />
    </InputGroup>

    <SubmitButton label="Submit" />
  </Form>
)
```

## Parameters

<ParamField path="schema" type="Record<string, FormValue>" required>
  A [form schema](../forms/form-schema) is how you tell Attio about the shape and validation rules
  of your form data.
</ParamField>

<ParamField path="initialValues" type="Record<string, any>" required>
  These values must match the type defined by your [form schema](/sdk/forms/form-schema).
</ParamField>

## Returns

`useForm` returns an object containing the following functions and React components.

<ResponseField name="change" type="(path: string, value: any) => void">
  An imperative function to update a particular value in the form.
</ResponseField>

<ResponseField name="submit" type="() => void">
  An imperative function to submit the form. It will cause validation to run, and if the validation passes it will call the `onSubmit` handler that you have passed to `<Form/>`.

  <Note>
    You should typically prefer to render a `<SubmitButton />` instead of calling `submit` directly.
  </Note>
</ResponseField>

<ResponseField name="Checkbox" type="React.ComponentType">
  Boolean checkbox input. [Link to full docs](../components/forms/checkbox).
</ResponseField>

<ResponseField name="Combobox" type="React.ComponentType">
  Dropdown selection input. [Link to full docs](../components/forms/combobox).
</ResponseField>

<ResponseField name="DateTimeInput" type="React.ComponentType">
  Date and time input field. [Link to full docs](../components/forms/date-time-input).
</ResponseField>

<ResponseField name="Form" type="React.ComponentType">
  A form wrapper with an `onSubmit` handler. [Link to full docs](../components/forms/form).
</ResponseField>

<ResponseField name="InputGroup" type="React.ComponentType">
  Group multiple inputs together. [Link to full docs](../components/forms/input-group).
</ResponseField>

<ResponseField name="NumberInput" type="React.ComponentType">
  Numeric input field. [Link to full docs](../components/forms/number-input).
</ResponseField>

<ResponseField name="PlainDateInput" type="React.ComponentType">
  Date input field (without time). [Link to full docs](../components/forms/plain-date-input).
</ResponseField>

<ResponseField name="SubmitButton" type="React.ComponentType">
  Button to submit the form. [Link to full docs](../components/forms/submit-button).
</ResponseField>

<ResponseField name="TextInput" type="React.ComponentType">
  Text input field. [Link to full docs](../components/forms/text-input).
</ResponseField>

<ResponseField name="TextArea" type="React.ComponentType">
  Multi-line text input field. [Link to full docs](../components/forms/text-area).
</ResponseField>

<ResponseField name="Toggle" type="React.ComponentType">
  Boolean toggle switch. [Link to full docs](../components/forms/toggle).
</ResponseField>

<ResponseField name="WithState" type="React.ComponentType">
  Access form state for conditional rendering. [Link to full docs](../components/forms/with-state).
</ResponseField>

<ResponseField name="AttioRecordCombobox" type="React.ComponentType">
  Select Attio records. [Link to full docs](../components/forms/attio-record-combobox).
</ResponseField>

<ResponseField name="AttioUserCombobox" type="React.ComponentType">
  Select Attio workspace users. [Link to full docs](../components/forms/attio-user-combobox).
</ResponseField>

<ResponseField name="RichTextInput" type="React.ComponentType">
  Rich text editor input.
</ResponseField>