useForm()

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>
)